将 v-model 添加到嵌套 v-for 循环中的输入

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: Cannot read property '1' of undefined

Answer 1

您的错误是因为 n 和 i 索引在 v-for

中从 1 开始

此外，对于更通用的方法，您可以从 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);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="n in y" :key="n" style="display:flex">
    <div v-for="i in x" :key="i">
      <input type="number" v-model.number="array[n - 1][i - 1]">
    </div>
  </div>
  {{array}}
</div>

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-model 添加到嵌套 v-for 循环中的输入

Add v-model to inputs in nested v-for loop

vue.js

vuejs2

v-for