Vue.jsでv-forループ内にラジオボタンを作成したい

Question

前提・実現したいこと

Vue.jsを用いて選択式のアンケートのようなものを作成しています。
アンケート内容はJSONで受け取り、v-forでアンケート内容と回答用のラジオボタンを作成したいと考えています。

発生している問題

ローカルサーバで実行させて見たところ、表示させることはできましたがラジオボタンが同一のものと認識されているようで、いずれかのラジオボタンを押すとすべての質問に反映されていまいます。
それぞれのアンケートごとにラジオボタンを設定させたいです。

該当のソースコード

<div id="app">
    <ul>
      <li v-for="item in list" v-bind:key="item.id">
        <p>{{ item.content }}</p>
        <label><input type="radio" value="a" v-model="val"> はい</label><br>
        <label><input type="radio" value="b" v-model="val"> いいえ</label><br>
        <label><input type="radio" value="c" v-model="val"> どちらでもない</label><br>
        <p>回答:{{ val }}</p>
      </li>
    </ul>
  </div>

試したこと

タグにidを持たせようと調べて試してみましたが、結局うまくいきませんでした。
ご教授お願いいたします。

Answer 1

inputタグの各値が、同じ変数valを参照しているからです。

ループごとに別の値を設定したいなら、そのための変数もそれぞれ用意する必要があります。

valをitem.valなどにするのが一番素直かなと思います。

Comments

[urama]

回答していただいた通りに実行してみた結果、望み通りに表示させることができました。
ありがとうございます。