Vue.js v-modelの書き方（変数の文字列を同時に入れる方法）

Vue.jsのtemplate内で以下を記載しています。
質問カテゴリのループの中で、checkboxの選択項目をまたループで回しています。

ループしているものは全て個数は決まっておらず、あるかどうかも不明です。
inputタグのv-modelでbindしたいのですが、全てが不確定要素のため、
idやindexの組み合わせでv-bindする名前を指定しなければなりません。（dataは別のmethods質問の数だけindexの組み合わせで持たせています。）

そこでinput要素に v-modelに"question${index2 + 1}-${index2 + 1}"と書いたところエラーになり、表示がされません。
どこに誤りがあるのか自分では全くわかりませんでした。

v-modelをきちんと書くにはどのように書いたら良いでしょうか？
説明不足でしたらコメントいただければ追加致します。よろしくお願いします。

javascript
1<template
2  v-for="category in questionCategories"
3>
4  <div
5    v-for="(question, index1) in category.questions"
6  >
7    <span>{{question.name}}</span>
8    <div
9      v-for="(item, index2) in question.questionItems"
10      :key="item.id"
11    >
12      <input
13        type="checkbox"
14        :id="item.id"
15        :value="item.name"
16        v-model="`question${index2}-${index2}`"
17      />
18      <label
19        :for="item.id"
20      >
21        {{ item.name }}
22      </label>
23    </div>
24  </div>
25</template>

yureighost

2020/02/25 01:28

2パターン程、データ構造と画面でどう表示させたいかを例で出してくれると答えやすいです。

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

回答1件

Vueでループだとデータ構造部分の考慮は避けて通れないと思いますので、
貼られてるVueソースで表示できるサンプルのデータ構造を作って実装してみました。
templeteでv-forが効かなかったしたので、色々と修正していますが、
表示されるデータ構造からv-model用の多次元配列を作成してそれにindexを渡す方法で表示できます。

vue
1<template>
2  <div>
3    <div v-for="(category, index1) in questionCategories" :key="index1">
4      <div v-for="(question, index2) in category.questions" :key="index2">
5        <span>{{question.name}}</span>
6        <div v-for="item in question.questionItems" :key="item.id">
7          <input
8            type="checkbox"
9            :id="item.id"
10            :value="item.name"
11            v-model="checkNames[index1][index2]"
12          />
13          <label :for="item.id">
14            {{ item.name }}
15          </label>
16        </div>
17      </div>
18    </div>
19  </div>
20</template>
21
22<script>
23  export default {
24    name: 'question-page',
25    // データ構造
26    data() {
27      const questionCategory = {
28        // チェックボックスに表示させる質問の配列（サンプル）
29        questionCategories: [
30          {
31            questions: [
32              {
33                name: '質問1-1',
34                questionItems: [
35                  { id: 1, name: '回答1' },
36                  { id: 2, name: '回答2' },
37                  { id: 3, name: '回答3' },
38                  { id: 4, name: '回答4' },
39                  { id: 5, name: '回答5' },
40                ],
41              },
42              {
43                name: '質問1-2',
44                questionItems: [
45                  { id: 1, name: '回答1' },
46                  { id: 2, name: '回答2' },
47                ],
48              },
49            ],
50          },
51          {
52            questions: [
53              {
54                name: '質問2-1',
55                questionItems: [
56                  { id: 1, name: '回答1' },
57                  { id: 2, name: '回答2' },
58                  { id: 3, name: '回答3' },
59                  { id: 4, name: '回答4' },
60                ],
61              },
62            ],
63          },
64          {
65            questions: [
66              {
67                name: '質問3-1',
68                questionItems: [
69                  { id: 1, name: '回答1' },
70                  { id: 2, name: '回答2' },
71                  { id: 3, name: '回答3' },
72                  { id: 4, name: '回答4' },
73                  { id: 5, name: '回答5' },
74                  { id: 6, name: '回答6' },
75                ],
76              },
77              {
78                name: '質問3-2',
79                questionItems: [
80                  { id: 1, name: '回答1' },
81                  { id: 2, name: '回答2' },
82                  { id: 3, name: '回答3' },
83                ],
84              },
85              {
86                name: '質問3-3',
87                questionItems: [
88                  { id: 1, name: '回答1' },
89                  { id: 2, name: '回答2' },
90                  { id: 3, name: '回答3' },
91                  { id: 4, name: '回答4' },
92                ],
93              },
94            ],
95          },
96        ],
97      };
98      // チェックボックスに表示させる質問の配列から対応する多次元配列を作成する
99      questionCategory.checkNames = (() => {
100        const checkNames = new Array(questionCategory.questionCategories.length);
101        for (let i = 0; i < questionCategory.questionCategories.length; i += 1) {
102          checkNames[i] = new Array(questionCategory.questionCategories[i].questions.length);
103          for (let j = 0; j < questionCategory.questionCategories[i].questions.length; j += 1) {
104            checkNames[i][j] = [];
105          }
106        }
107        return checkNames;
108      })();
109      return questionCategory;
110    },
111  };
112</script>