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)
  }
}