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 属性。这就是该方法执行 "automatically".

的原因

@click="handler" is a shorthand to v-on:click="handler" - the event handling directive.

:click="handler" is a shorthand to v-bind:click="handler", the property binding directive.

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

Vue :click is being triggered automatically inside v-for

vue.js

vuejs2

v-for