Question

假设我有这样的组件：

<template>
  <div>
    <div v-for="n in 2" :key="n">
      <div v-for="i in 2" :key="i">
        <input type="number" v-model="foo[n][i]">
      </div>
    </div>
    <pre>{{ foo }} </pre>
  </div>
</template>

这将渲染4个输入。现在，当我在此输入中输入一些内容（例如1到4）时，我希望foo变为：

[
    [1,2],
    [3,4]
]

相反，我有一个错误

TypeError：无法读取未定义的属性“ 1”

Answer 1

您的错误是由于n的{{1}}和i索引始于

对于更通用的方法，您也可以根据v-for生命周期中的维度生成一个数组。

created

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    x: 2,
    y: 2,
    array: []
  },
  created() {
    for (let i = 0; i < this.y; i++) {
      let row = [];
      for (let j = 0; j < this.x; j++) {
        row.push(0);
      }
      this.array.push(row);
    }
  }
})

Answer 2

您可以尝试以下解决方案：如果初始对象为undefined，则向其添加一个方法

<template>
    <div>
        <div v-for="n in 2" :key="n">
            <div v-for="i in 2" :key="i">
                <input type="number" v-model="getfoo(n)[i]">
            </div>
        </div>
        <pre>{{ foo }} </pre>
    </div>
</template>

methods: {
    getfoo(n) {
        if(!this.foo[n]) this.foo[n] = {}; // or = [] 
        return this.foo[n];
    },
}

将v模型添加到嵌套v for循环的输入中

2 个答案: