Добавить v-модель к входам во вложенном цикле v-for - PullRequest
Новая
       29

Добавить v-модель к входам во вложенном цикле v-for

2 голосов
/ 04 ноября 2019

Допустим, у меня есть такой компонент: 


  
    
      
        
      
    
    {{ foo }}

Это рендеринг 4 входа. Теперь, когда я ввожу что-то в эти входы, например от 1 до 4 для каждого, я бы хотел, чтобы foo стал: 

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

, вместо этого у меня появляется ошибка

TypeError: Cannotчитать свойство '1' из неопределенного

Ответы [ 2 ]

1 голос
/ 04 ноября 2019

Ваша ошибка связана с тем, что индексы n и i начинаются с 1 в 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);
    }
  }
})
<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>
0 голосов
/ 04 ноября 2019

вы можете попробовать это решение: добавив метод к начальному новому объекту, если он undefined

<code><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 }} 
methods: {
    getfoo(n) {
        if(!this.foo[n]) this.foo[n] = {}; // or = [] 
        return this.foo[n];
    },
}
...