handleclick 哪儿报错

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   </head>
   <body>
       <div id="root">
           <div>
               <input v-model="inputValue" />
               <button @click="handleSubmit">提交</button>
           </div>
           <ul>
               
               
               <todo-item v-for="(item,index) of list"
               :key="index"
               :content='item'
               :index="index"
               @delete='handleDelete'          监听handleDelete事件
               >
               </todo-item>
               
           </ul>
       </div>
       <script>
           Vue.component('todo-item',{
               props: ['content',index],
               template: '<li @click='handleClick'>{{content}}</li>',
               methods: handleClick: function(){
                   this.$emit('delete',this.index)
                   }
               }

           })

           new Vue({
               el:"#root",
               data:{
                   inputValue: "",
                   list: []
               },
               methods: {
                   handleSubmit: function(index){
                       this.list.push(this.inputValue)
                       this.inputValue = ''
               },
               handleDelete:function(){
                   this.list.splice(index,1)
               }

           }
           })
       </script>
   </body>
</html>