Vue JS가 v-for에서 데이터 전송 버튼 클릭

Vue JS가 v-for에서 데이터 전송 버튼 클릭

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>

하지만 나는 오류를 얻었다.

내가 어떻게 그런 결과를 얻을 수 있을까?

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

언급URL : https://stackoverflow.com/questions/51456021/vue-js-send-data-from-v-for-on-button-click