Vue :click 在 v-for 内自动触发

Question

我有 v-for 循环，其中的元素有 :click 调用函数。该功能会在页面加载时的每个元素上自动触发！

<li v-if="itemSaved.length > 0" v-for="(item, index) in items" class="list-group-item">
   <div class="pull-right m-l">
     <i v-if="itemSaved[index] == 'not saved'" class="icon-plus" :click="addItem(item.id)"></i>
     <i v-else class="icon-check" :click="removeItem(item.id)"></i>
   </div>
</li>



export default {
 data: () => ({
  itemSaved: [{"id":1, "name":"Jim"},{"id":2, "name":"Max"}]
}),
methods: {

  addItem: function(id){
    console.log('add item ' + id)
  }, 
  removeItem: function(id){
    console.log('remove item ' + id)
  }
}
}

基本上我在控制台日志中得到了add item 1和的列表add item 2

Answer 1

应该：

@click="removeItem(item.id)"

不是：

:click="removeItem(item.id)"

当您拥有时，:click="removeItem(item.id)"您实际上是将方法调用的结果绑定removeItem(item.id)到click属性。这就是该方法“自动”执行的原因。

@click="handler" v-on:click="handler"是事件处理指令的简写。

:click="handler" v-bind:click="handler"是属性绑定指令的简写。