Vue.js点击卡片触发click事件获取数组对应项描述返回undefined如何解决

• 点击事件未传参：你在v-for循环内绑定点击事件时，没有将当前遍历得到的choc对象传入handleTileClick方法，方法无法获取被点击卡片对应的数组项数据。
• 非法访问不存在的实例属性：你的Vue实例data中仅声明了数组chocs，没有名为choc的顶层属性，this.choc本身为undefined，访问this.choc.description自然返回undefined。

1. 修改HTML中点击事件的绑定逻辑，传入当前对应的choc对象：

<div class="carousel-cell-card" v-on:click="handleTileClick(choc)"></div>

2. 修改JS中的handleTileClick方法，接收传入的参数并使用：

methods: {
  handleTileClick: function(choc){
    $("#fox").append(`<div id="popover-dialog">data here: ${choc.description}</div>`);
  }
}

Vue项目中不推荐混合使用jQuery操作DOM，你可以用原生Vue的方式实现同样的效果：

1. 在data中新增一个数组用于存储需要展示的描述内容：

data: {
  chocs: [/* 原有数据 */],
  showDescList: []
}

2. 修改点击方法，往数组中追加内容：

handleTileClick: function(choc){
  this.showDescList.push(choc.description)
}

3. 修改页面#fox区域的渲染逻辑：

<div id="fox">
  <div v-for="(desc, index) in showDescList" :key="index" id="popover-dialog">
    data here: {{ desc }}
  </div>
</div>

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