Vue.js中调用addItem函数传递参数失效，求正确实现方式

你的代码存在几个问题，导致无法正常传递参数，修正方案如下：

原代码的问题点 #

• <span>标签误用v-model：v-model仅支持表单输入类元素（如input、select、textarea），普通文本展示的<span>不需要这个指令，直接用插值语法即可。
• 点击事件错误使用Mustache插值：在v-on:click（或简写@click）的函数调用中，不需要用{{}}包裹变量，直接引用Vue数据变量即可。
• 缺少v-for的:key属性：这是Vue列表渲染的最佳实践，用于标识每个列表项的唯一性，避免不必要的DOM重渲染。

修正后的完整代码 #

<ul>
  <!-- 给v-for添加唯一key，这里假设item.name是唯一值，也可使用id等唯一标识 -->
  <li v-for="item in preDefItems" :key="item.name">
      <!-- 移除无用的v-model，直接插值展示内容 -->
      <span>{{ item.name }}, {{ item.price }}</span>
      <!-- 点击事件直接传递变量，无需插值语法 -->
      <input type="button" value="+" @click="addItem(item.name, item.price, item.name)"/>
  </li>
</ul>

对应的函数定义 #

在Vue实例的methods中定义addItem函数，即可接收传递的参数：

methods: {
  addItem(name, price, thirdParam) {
    // 这里可直接使用传递的参数进行业务处理
    console.log('商品名称:', name, '价格:', price, '额外参数:', thirdParam);
    // 例如添加到购物车等逻辑
  }
}

更简洁的传参方式（推荐） #

如果需要使用item对象的多个属性，直接传递整个item对象会更高效：

<input type="button" value="+" @click="addItem(item)"/>

对应的函数：

methods: {
  addItem(item) {
    console.log('商品信息:', item.name, item.price);
    // 直接操作item的属性即可，无需逐个传递参数
  }
}

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