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-model 绑定不起作用。

Answer 1

Vue 不会检测已经反应的对象中的新道具。您应该使用 Vue.$set 或预先创建带有所有必要道具的 multi 对象。见Detection caveats

Answer 2

填充对象不需要多次调用$set。你也可以这样做：

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

之所以有效，是因为您无需在this.multi 上设置属性，而是创建一个新对象并将现有数据属性设置为它。 Vue 可以检测到这种变化。