VueJS не может привязать ввод к свойствам, сгенерированным в ловушке beforeMount

Question

Я пытаюсь сгенерировать вложенную серию объектов в beforeMount хуке. Любая привязка данных, которую я пытаюсь установить между входами, не работает. Там нет ошибок.

Вот простая версия того, что я делаю, которая инкапсулирует проблему.

new Vue({
  el: "#app",
    data () {return {
    multi: {}, 
    ids: ["eaf", "6ef", "3ey"]
  }},
  beforeMount () {
    this.ids.forEach(i=> {
    	this.multi[i] = {
      	name: "",
      }
    })
  }
})

<div id="app">
  
  <div id="group" v-for="(i, index) in ids">
    <p>Group {{i}}</p>
    <p>{{multi[i].name}}</p>
    
    <input type="text" v-model="multi[i].name">
  </div>
</div>

Привязка v-модели НЕ работает.

Answer 1

Заполнение объекта не требует многократных вызовов $set. Вы также можете сделать это:

beforeMount () {
    const multi = {};
    this.ids.forEach(i=> {
        multi[i] = {
          name: "",
        }
    })
    this.multi = multi;
}

Это работает, потому что вместо установки свойств на this.multi вы создаете новый объект и присваиваете ему существующее свойство данных. Vue может обнаружить это изменение.

Answer 2

Vue не обнаруживает новые реквизиты в уже реактивных объектах. Вы должны использовать Vue. $ Set или создать объект multi со всеми необходимыми опорами заранее. См. Предупреждение об обнаружении