Vue3中如何在v-for循环内将变量传入函数？

核心问题修正 #

你在@click事件中错误使用了插值语法{{}}和模板字符串，Vue的事件绑定表达式可以直接引用变量，不需要额外包裹。

修正后的代码 #

HTML部分

<div
  class="client_card"
  type="button"
  v-for="c in all_clients"
  :key="c.c_cid" <!-- 建议添加key属性优化v-for性能 -->
  data-bs-toggle="modal"
  data-bs-target="#add_delievery_address"
>
  <div class="modal-footer" style="background-color: #1267aa">
    <button @click="createDelieveryAddress(c.c_cid)">
      Submit Delivery Address
    </button>
  </div>
</div>

JS部分

<script>
export default {
  name: "ClientAll",
  data() {
    return {
      all_clients: [],
      client: {
        c_fullname: null,
        c_address_1: null,
        c_address_2: null,
        c_city: null,
        c_insert_date: null,
        c_post_code: null,
        c_cid: null
      }
    }
  },
  methods: {
    createDelieveryAddress(c_cid) {
      console.log("获取到的c_cid:", c_cid); // 修改日志便于验证参数
    }
  }
}
</script>

补充说明 #

1. v-for循环建议添加:key属性，值用唯一标识（比如c_cid），这是Vue的最佳实践，能避免渲染异常。
2. 如果后续需要用到client的其他属性，也可以直接传递整个c对象：@click="createDelieveryAddress(c)"，方法里接收参数后即可访问c.c_cid、c.c_fullname等属性。

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