vue.js - 将 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>