Vue.js中如何在<input>的onclick属性传递v-for循环变量参数

嘿，这个问题我熟！你遇到的是Vue事件绑定和原生DOM事件的作用域差异问题，别急，我给你讲清楚怎么解决～

首先得划重点：别用原生的onclick啦！ 原生onclick的作用域和Vue模板的响应式变量作用域不兼容，根本拿不到v-for循环里的item.id，得用Vue自己的事件绑定语法才行。

正确写法一：直接传递item.id给remove方法 #

先改模板部分，把onclick换成Vue的@click（这是v-on:click的简写），然后直接把item.id作为参数传进去：

<template>
  <div>
    <h3>待办事项</h3>
    <ul>
      <!-- v-for循环要加上:key，这是Vue的规范要求哦 -->
      <li v-for="item in todoList" :key="item.id">
        {{ item.content }}
        <!-- 用@click绑定事件，直接传递item.id -->
        <button @click="remove(item.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

然后你的JavaScript方法部分保持接收id参数的逻辑就行，比如：

<script>
export default {
  data() {
    return {
      todoList: [
        { id: 1, content: '熟悉Vue基础语法' },
        { id: 2, content: '实现待办事项列表' },
        { id: 3, content: '搞定删除按钮传参' }
      ]
    }
  },
  methods: {
    remove(id) {
      // 通过过滤数组删除对应id的项，更新列表
      this.todoList = this.todoList.filter(item => item.id !== id)
    }
  }
}
</script>

正确写法二：直接传递整个item对象 #

如果你觉得直接传对象更灵活，也可以这么写：

模板里改成：

<button @click="remove(item)">删除</button>

然后方法里改成接收item对象，再取id进行删除：

methods: {
  remove(item) {
    this.todoList = this.todoList.filter(todo => todo.id !== item.id)
  }
}

为什么原生onclick不行？ #

简单说，原生onclick的回调函数是在全局window作用域下运行的，它访问不到Vue模板里v-for循环的item变量——这个item是Vue模板的局部响应式变量，只有Vue的事件绑定（@click）才能正确拿到这个作用域里的变量。

这样改完之后，点击删除按钮就能正确触发remove方法并删除对应项啦！

内容的提问来源于stack exchange，提问作者Melvin Abraham