vue.jsのv-forで動的に増やす要素でv-onを効かすには？

Question

例えば以下のような記述があり、

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

実際に生成されたFooやBarを「クリックしたら」のイベントを付けたいと思っています。この場合どのようにv-onを効かせればよいのでしょう。

私の実際は、tbodyの中のtdを生成していますが、その中のbuttonにv-onを記述したいと思っています。

<tbody id="Tb">
<tr v-for="item in items" v-if= "item.grade == userid && item.set == userid2">
<td class="align-middle">
<button class="btn btn-light" value="1" >合格</button>
</td>

よろしくお願いします。

Answer 1

v-forとv-ifは同じエレメントでの使用を推奨していないはずです。
templateなど使って分けましょう。

クリックイベントは普通にmethodsに関数を用意して
v-on:clickや@clickでitemなど使えばいいのではないでしょうか？

<tbody id="Tb">
  <template v-for="item in items">
    <tr v-if="item.grade == userid && item.set == userid2">
      <td class="align-middle">
        <button class="btn btn-light" @click="test(item.message)">合格</button>
      </td>
    </tr>
  </template>
</tbody>