vue怎么样一个页面动态添加相同的组件绑定不同的数据？

Question

现在有一个问题，在一个页面，初始只有一个复选框组，通过单击事件可以创建新的复选框组，我打算在单击事件的时候给他添加绑定元素就是下面这样``

for (let j = 0, len = this.res.length; j < len; j++) {
    if (this.res[j].type == 'qqqq') {

      this.checkList.push([])
    }

  }

渲染是这样

  <div rows="10" v-for="( value, index) in res">
    <div v-if="value.type === 'qqqq'&&checkList.length!=undefined">
      {{ value.question_name }}{{checkList.length}}
      <el-checkbox-group v-model="checkList[index]">
        <el-checkbox label="A"></el-checkbox>
        <el-checkbox label="B"></el-checkbox>
        <el-checkbox label="C"></el-checkbox>
        <el-checkbox label="D"></el-checkbox>
      </el-checkbox-group>
    </div>
  </div>

可是在渲染的时候数组是成功追加了，渲染不成功，提示length未定义，可是我也加了v-if判断length未定义了.还是一样的原因，求大佬解答

就是其实我想把这一个页面的复选框绑定的数据写成一个二维数组的形式

Answer 1

问题1： 你 v-for 没有加 key
问题2: checkList 的下标和 res 的下标并不对应。因为在 qqq 的时候 push ，然后比如第一个是aaa你这样不就是 res[1] 对应 checkList[1]

Answer 2

嗷嗷嗷 明白了 他的索引值其实并不一样，key也没有绑定...谢谢一楼