为什么我在组件里面绑定点击事件,审查元素显示Unexpected identifier?

来源:3-3 组件与实例的关系

明明的明天12

2018-10-12 15:50

<html>

<head>

   <script src='./vue.js'></script>

</head>


<body>


<div id='root'>

  <input v-model='msg'/>

  <button @click='handleSubmit'>Submit</button>

  <ul>

    <todoitem v-for='(item,index) of list' :key='index' :content='item'></todoitem>

  </ul>

</div>


<script> 

  Vue.component('todoitem',{

    props:['content'],

    template:'<li v-bind:click='handleClick'>{{content}}</li>',

    methods:{

      handleClick:function(){

        alert('clicked')

      }

    }

  

  })


  new Vue({

    el:'#root',

    data:{

      msg:'',

      list:[]

    },

    methods:{

      handleSubmit:function(){

        this.list.push(this.msg)

        this.msg=''

      }

    }

  })

</script>

</body>


</html>

https://img.mukewang.com/5bc052440001b2b906550576.jpg

写回答 关注

3回答

  • 溺水的鱼321
    2018-10-12 16:20:05
    已采纳

    你这个问题是Js中单引号里面不能嵌套单引号,双引号里面可以嵌套单引号的,改成这样就行template: "<li v-bind:click='handleClick '>{{content}}</li>"

    溺水的鱼32... 回复明明的明天1...

    不客气

    2018-10-15 09:42:24

    共 2 条回复 >

  • qq_正年轻_0
    2019-12-23 15:51:18

    如下图:http://img3.mukewang.com/5e0071e60001578c11800599.jpg

  • qq_慕娘6581288
    2019-06-14 20:20:58

    绑定点击事件不是 v-on:click 或者@:click 么,你写的v-bind:click  也可以的么?

    挪威森霖

    成属性绑定了

    2019-06-27 19:47:37

    共 1 条回复 >

vue2.5入门

快速理解Vue编程理念上手Vue2.0开发。

146818 学习 · 657 问题

查看课程

相似问题