Vue实现todolist删除功能

<div id="app">
 <input v-model="inputvalue">
 <button @click="handlesumbit">提交</button>
 <todo-item v-for="(item,index) of list":key="index":content="item":index="index"
  @delete="handledelete"></todo-item>
</div>

<script >
 vue.component('todo-item',{
  props:["content",'index'],
  template:"<li @click='handlesubmit'>{{content}}{{index}}</li>",
  methods:{
   handlesubmit:function () {
    this.$emit('delete',this.index)
   }
  }
 })
 new vue({
  el:'#app',
  data:{
   inputvalue:'',
   list:[]
  },
  methods:{
   handlesumbit:function () {
    this.list.push(this.inputvalue);
    this.inputvalue="";
   },
   handledelete:function (index) {
    this.list.splice(index,1)
   }
  }
 })
</script>