v-forで取得したindexを使用して配列の番号を指定したい

apiの情報をv-forで展開しインデックス番号も表示させることはできました。
ここで得たインデックス番号を利用してjsonパラメータに１つの番号を指定し、
再度apiへ投げたいと思ってます。スクリプト内で配列に対し、
インデックスを指定する方法が分からず困っています。よろしくお願いします。
sendの中にapiから取得した番号が複数入ってきます。

vue
1<template>
2    <li v-for = " (list, index) in lists" :key ="list.show">
3      <div id='indexnum'>{{index}}</div>
4<button type='submit' @click = "send" >送信</button></div></li>
5</template>
6
7<script>
8  data: function () {
9    return {
10      lists: null,
11      show: false,
12      send: []
13    }
14
15  send () {
16     var = params = {
17     sendnum: send[] ← v-forで生成された各ボタンのインデックスを指定したい
18   }
19  }
20... post,then~
21</script>

行動規範の内容に同意します

回答1件

ベストアンサー

定義したメソッドに引数を設定して、そのままインデックスを渡してしまえばいいのではないでしょうか。

vue
1<template>
2  <div>
3    <li v-for="(list, index) in lists" :key="list.show">
4      <div id='indexnum'>{{index}}</div>
5      <button type='submit' @click="sendindex(index)">送信</button>
6    </li>
7    {{send}}
8  </div>
9</template>
10
11<script>
12  export default {
13    name: 'sample-page',
14    data() {
15      return {
16        lists: [
17          { show: 'first' },
18          { show: 'second' },
19          { show: 'third' },
20        ],
21        show: false,
22        send: [],
23      };
24    },
25    methods: {
26      sendindex(index) {
27        this.send.push(index);
28      },
29    },
30  };
31</script>