如何将对象作为参数传递给Vue @click事件处理函数

Vue完全支持将对象作为参数传入@click事件处理函数，你遇到的报错是内联编写对象时的语法冲突（通常是引号嵌套错误）导致的，和传参本身无关。以下是两种正确的实现方式：

方案1：预定义对象到组件配置中（更推荐） #

将自定义的固定对象提前定义在组件的data或computed属性中，模板中直接传变量即可，完全避免语法冲突问题，可读性和可维护性更高。

1. 组件js部分定义自定义对象：

data() {
  return {
    // 你的自定义产品对象，可按需求修改属性
    customProduct: {
      id: 999,
      category: "自定义分类",
      name: "自定义产品名",
      description: "自定义产品描述",
      weight: "自定义重量",
      dimensions: "自定义尺寸",
      bulbs: "自定义灯泡参数",
      image: "自定义图片路径",
      link: "Custom/Product"
    }
  }
}

2. 模板中直接传变量：

<div class="preview-icon" @click="showPreview(customProduct, 'heritage/' + customProduct.link.toLowerCase())">
    <i class="material-icons">&#xE417;</i>
</div>

方案2：内联直接传入对象 #

如果需要临时直接在模板里写对象，注意严格区分不同层级的引号：外层@click用双引号的话，对象内部的字符串属性全部用单引号，避免引号提前闭合导致解析错误。示例写法如下：

<div class="preview-icon" @click="showPreview({
  id: 999,
  category: '自定义分类',
  name: '自定义产品名',
  description: '自定义产品描述',
  weight: '自定义重量',
  dimensions: '自定义尺寸',
  bulbs: '自定义灯泡参数',
  image: '自定义图片路径',
  link: 'Custom/Product'
}, 'heritage/custom/product')">
    <i class="material-icons">&#xE417;</i>
</div>

如果对象属性值中本身包含单引号，需要对单引号做转义处理，例：name: 'O\'Neil台灯'。

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