Vue.js Vant Cell组件 获取点击后的id与text

引入Vant的cell组件

方式参考
Vant组件 Cell 单元格
这里是传入一系列值 ，形成可点击列表，点击则可以获取其id与名称值，进行下一步操作，而官方并没有给出相关api，这里默认的点击事件是JavaScript中的event事件

而我们要获取的是其中的text与id值，但不能使用jquery，因为既然用了vue就要避免再用jquery，那么我们该怎么操作？

具体操作

html部分，这里使用v-for方法进行循环列表渲染，id内容是列表中的唯一表示 Id，显示的则是title，名称为Name

<van-cell is-link v-for="item in station" :key="item.Id" :id="item.Id" :title="item.Name" @click="onClick"/>

script部分，这里放上一小部分代码，需要注意的是data内的station数组我并没有在此处放数据，请各位自行斟酌，需要放多组数据便于参考

data() {
    return {
      station: []
    }
  },
methods: {
    onClick(e) {
      console.log(e.currentTarget.id)
      console.log(e.currentTarget.innerText)
    }
}

那么只要使用e.currentTarget.id就能获得点击事件的id,e.currentTarget.innerText就能获得点击事件的内部text值

渲染结果

点击第一条console结果

那么接下来根据业务需求传入值即可，完毕

参考资料

Vant组件-Cell 单元格如何使用
vue.js获得当前元素的文字信息方法
W3C–target 事件属性