为了账号安全,请及时绑定邮箱和手机立即绑定

怎么添加单击事件就报错啊?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Todolist</title>

<script type="text/javascript"  src="./vue.js"></script>

</head>

<body>


<div id="root">

<div>

  <input v-model="inputValue"></input>

  <button @click="handlseSubmit">提交</button>

</div>

       <ul><todo-item

    v-for="(item,index) of list"  :key="index" :content="item"></todo-item></ul>



</div>


<script>


Vue.component("todo-item",{

props:["content"],/*全局组件*/

    template:"<li @click="handClick" >{{content}}</li>",  /*这里只要添加单击事件就报错啊 button那个单击事件就没问题*/

    methods:{

     handClick:function(){

     alert("asd")

     }

    }

});





// var TodoItme={

//  template:"<li>局部组件</li>"

// }

new Vue({

    el:"#root",

    // components:{"todo-item":TodoItme},/*局部组件注册*/

    data:{

     inputValue:"",

     list:[]

     },

     methods:{

     handlseSubmit:function(){

     this.list.push(this.inputValue)

     this.inputValue=""

     }

     }

});


</script>

</body>

</html>


正在回答

1 回答

因为template外面层嵌套的是双引号,你里面的点击内容也是双引号,所以导致无法解析

解决方法:    双引号嵌套,内容需用单引号扩住

                  单引号嵌套,内容需用双引号扩住

4 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

怎么添加单击事件就报错啊?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信