vueを使ってhtmlの要素に希望する値を挿入していく方法

Question

宜しくお願い致します。

下記のiの場所にv-forで処理をした配列のインデックス番号を入れたいと思っています。

 <div class="item" v-for="product in data" v-bind:key="product.id">

//行いたい出力結果
<button onClick="link(i)"/>{{product.title.}}</button>

link()の中にインデックス番号を入れたい理由は、link(i)という関数を呼び出し、処理をさせたい為です。

尚、下記のように記載をしてみましたが意とする結果が得られませんでした。

<button onClick="link(\'' + product[i] + '\')"/>{{product.title.}}</button>

知りたいこと

・上記を行う場合、どのようなコードを記載すれば良いか。
・このような場合は、vueではなく普通のJSなどで処理をしたら良いのか
（配列自体は、普通のJSでも取り出しが可能です。）

Answer 1

forの2つ目の引数でindexを取ることが出来ます。
公式のリストレンダリングの説明を見れば書いてあるので目を通してみてください。

<template>
  <div class="item" v-for="(product, index) in data" :key="product.id">
    <button @click="link(index)">{{ product.title }}</button>
  </div>
</template>

<script>
export default {
  methods: {
    link(index) {...}
  }
}
</script>

Comments

[tomato01]

ご回答を頂き誠にありがとうございます。

とても参考になりました。また、貴重なリンクも頂きありがとうございました。