Vue JS在单击按钮时从v-for发送数据

Question

我是Vue JS的新手，但是我有一个小问题

我正在遍历一个数组，我在div内有一个与之循环的按钮

想法是在点击事件之后获取指定数据的数据

例如，假设我有这个数组numbers: [1,2,3,4,5]，我正在像这样遍历它

<div v-for="number in numbers">
    <p>{{ number }}</p>
    <button v-on:click="getTheSelectedOne"> Get The Value </button>
</div>

我尝试这样做

<button v-on:click="getTheValueOfTheSelectedOne(number)"> Get The Value </button>

但是我出错了，

我如何获得这样的结果？

Answer 1

<div v-for="number in numbers">

应该是：

<div v-for="(number, index) in numbers" :key="index">

以下内容：

<button v-on:click="getTheSelectedOne"> Get The Value </button>

应该是：

<button v-on:click="getTheSelectedOne(number)"> Get The Value </button>

并且您必须定义该方法：

methods: {
  getTheSelectedOne (number) {
    // then number will be the number
    console.log(number)
  }
}