javascript - 获取 v-for 中当前迭代的元素

Question

我有一个简单的 v-for 用于渲染跨度列表:

<span v-for="kc in kcList">
    {{ kc }}
</span>

在每次迭代中，我希望能够捕获跨度并向其中添加一个 onclick 函数，以提醒 kc 的值，比如说

如何做到这一点？

Answer 1

与您所描述的几乎完全一样，尽管我不知道您所说的“捕获”是什么意思。您只需在范围上放置一个单击处理程序即可调用执行警报的方法。

new Vue({
  el: '#app',
  data: {
    kcList: ['one','two','three']
  },
  methods: {
    alertOn(kc) {
      alert(kc);
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <span v-for="kc in kcList" @click="alertOn(kc)">
    {{ kc }}
  </span>
</div>