VUE todolist

<template>
  <div>
    <div>
      <input v-model="inputValue"/>
      <button @click="handelpush">push</button>
    </div>
    <ul>
      <todo-item
        v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @delete="handelDelete"
      ></todo-item>
    </ul>
  </div>
</template>

<script>
  import todoItem from './components/todoItem'

  export default {
    components: {
      'todo-item': todoItem
    },
    data() {
      return {
        inputValue: '',
        list: []
      }
    },
    methods: {
      handelpush() {
        this.list.push(this.inputValue),
          this.inputValue = ''
      },
      handelDelete(index) {
        this.list.splice('index', 1)
      }
    }
  }
</script>

<style>

</style>

<template>
  <li @click="handelDelete">{{content}}</li>
</template>

<script>
  export default {
    props: ['content', 'index'],
    methods: {
      handelDelete() {
        this.$emit('delete', this.index)
        // alert("dasdfasd");
      }

    }
  }
</script>

<style scoped>

</style>

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import todoList from './todoList'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {todoList},
  template: '<todoList/>'
})