在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>