【Nuxt】複数のradioボタンを持つ複数の回答をv-modelで保持し、同じ配列に入れるには？

#はじめに
まずはこちらをご覧ください

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">複数のradioボタンを持つ複数の回答を同じ配列に入れる！！ <a href="https://t.co/Y55muqBruZ">pic.twitter.com/Y55muqBruZ</a></p>&mdash; 高卒プログラマーげんと (@gento34165638) <a href="https://twitter.com/gento34165638/status/1489544016580714497?ref_src=twsrc%5Etfw">February 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんな感じで、各質問の回答を`v-model`で保持し同じ配列に入れる方法でちょっとつまずいたので、、、ここに記録するとします:sweat_smile:

#`v-for`の中で普通に`v-model`を使うと？？

・cssは割愛してます。
・質問は👇のようなjsonでimportしております。

```json:questionsData.json
[
  {
    "id": 1,
    "title": "神経敏感に感じましたか",
    "type": "radio",
    "num": 5
  },
  // 省略
]
```



```vue
 <div
        class="question"
        v-for="(question, i) in questions"
        :key="question.id"
      >
        <div class="question-title">
          <div class="question-num">
            <span>Q{{ i + 1 }}</span>
          </div>
          <h3>{{ question.title }}</h3>
        </div>
        <div class="radio-box">
          <label class="radio" v-for="j in question.num" :key="j">
            <div class="point">{{ j - 1 }}</div>
            <input
              :type="question.type"
              :name="'question' + String(i)"
              :value="Number(j) - 1"
              v-model="answers"
            />
          </label>
        </div>
      </div>
     <p>{{ answers }}</p>

<script lang="ts">
import Vue from 'vue';
import questionsData from '../../assets/json/phase2/questionsData.json';

export default Vue.extend({
  data() {
    return {
      questions: questionsData,
      answers: [], // 配列を用意
    };
  }
});
</script>
```

これで回答していくたびに
`[2, 3, 1, 9, 8]`みたいな感じになるかといえば、、、

**なりません！！！**:joy:

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/831ee2d1-8b07-fe9d-9943-334a6fbb9454.gif)

イメージ的に「`answers`は配列なんやから値が追加されて行くんじゃね」とか思ってましたが、そんなことはありません。。。

#`v-for`のindexを使えば解決

`v-for`は２段階に分けて使われており、
①各質問のループ
②質問の中の回答ボタンのループ

があります。
それを踏まえた上で👇をご覧ください。

```vue
 <div
        class="question"
        v-for="(question, i) in questions"
        :key="question.id"
      >
        <div class="question-title">
          <div class="question-num">
            <span>Q{{ i + 1 }}</span>
          </div>
          <h3>{{ question.title }}</h3>
        </div>
        <div class="radio-box">
          <label class="radio" v-for="j in question.num" :key="j">
            <div class="point">{{ j - 1 }}</div>
            <input
              :type="question.type"
              :name="'question' + String(i)"
              :value="Number(j) - 1"
              v-model="answers[i]"
            />
          </label>
        </div>
      </div>
      <p>{{ answers }}</p>

<script lang="ts">
import Vue from 'vue';
import questionsData from '../../assets/json/phase2/questionsData.json';

export default Vue.extend({
  data() {
    return {
      questions: questionsData,
      answers: [], // 配列を用意
    };
  }
});
</script>
```

どこが変わったか分かりましたか？
**間違い探しレベルでほんのちょびっとしか変わってません:rolling_eyes:**

```vue
 <input
  :type="question.type"
  :name="'question' + String(i)"
  :value="Number(j) - 1"
  v-model="answers[i]"
 />
```

こんな感じで`answers[i]`とすることで解決できます。

`i`がどこからきたかというと、各質問のループで使われる`v-for`のindexです！

初めて実装するときは意外と手間取ったりするかもなので、参考にどうぞ:ok_woman_tone1: