渲染错误：“TypeError：无法读取未定义的属性 '0'”v-for 循环

Question

我在两个 v-for 循环中有一个输入文本。

  <div>
       <div v-for="(property, propIndex) in properties" :key="propIndex">
           {{ property.plot_name }}
          <div v-for="(house_type, typeIndex) in property.house_type.data" :key="typeIndex">
              {{ house_type.type }}<br>
              <input type="text" v-model="form[propIndex][typeIndex]">Rent<br>
              
          </div>
          <br>
       </div>
    </div>

当我使用如下标识只有一个索引的 v-model 时：

<input type="text" v-model="form[propIndex]">Rent<br>

或

<input type="text" v-model="form[typeIndex]">Rent<br>

我没有收到错误消息。但是当我使用两个索引识别 v-model 时

 <input type="text" v-model="form[propIndex][typeIndex]">Rent<br>

然后我得到错误 Error in render: "TypeError: Cannot read property '0' of undefined"

可能是什么问题？谢谢

Answer 1

数据中的表单对象只是一个空对象，这很好，如果一个值未定义，那么你只是未定义。但是随后您开始迭代 undefined 的一些子项（未定义的 propIndex 上不存在 typeIndex 为 0）。

如果不查看您的数据并了解所需的效果，很难说最佳解决方案是什么，但我想可以肯定地说，使用所有可能的值 od propIndex 填充数据中的表单对象可以解决您的问题。

data () {
  return  {
    form: [
      {}, {}, {}, {}, {} // as many as the possible propIndex values you expect
    ]
  } 
}