如何在vue上访问和创建带有v-model的嵌套对象

Question

我是vuejs的新手，我对v-model有问题，我想知道是否有办法访问嵌套对象并使用v-model 自动创建

我的html:

<div class="table-values" v-for="month in months">
<div class="month" v-text="month"></div>
<div>      
<input type="text" class="form-control" inputmode="decimal" @blur="test" v-model="consumption[month].rush_hour">
</div>
<div>
<input type="text" class="form-control" inputmode="decimal"  v-model="consumption[month].normal_hour">
</div>
<div>
<input type="text" class="form-control" inputmode="decimal" readonly>
</div>
<div>
<input type="text" class="form-control" inputmode="decimal" v-model="energy[month].rush_hour">
</div>
<div>
<input type="text" class="form-control" inputmode="decimal" v-model="energy[month].normal_hour">
</div>
</div>

我的JS:

var app = new Vue({
el: "#app",
data() {
return {
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
consumption: {},
energy: {},
}
})

我想创建这个例子：

{
consumption: {
Janeiro: {
rush_hour: 1,
normal_hour: 2
},
Fevereiro: {
rush_hour: 1,
normal_hour: 2
}
},
energy: {
Janeiro: {
rush_hour: 1,
normal_hour: 2
},
Fevereiro: {
rush_hour: 1,
normal_hour: 2
}
}

我只使用v-model="Consumption[month]"进行了测试并工作了，但当我使用v-model="Consumption[month]['rush_hour']"或v-model="Consumption[month].rush_hour"v-model(例如：Consumption.Janeiro.rush_hour(时，在控制台上抛出了一个错误。

Answer 1

如果您的组件的复杂性增加到这样的地步，您最好将逻辑提取到另一个组件，并将动态值作为道具接收，这样您就有了这样的东西：

props: {
month // "January"
},
data() {
return {
consumption: {
rush_hour: 0,
normal_hour: 0
},
energy: {
rush_hour: 0,
normal_hour: 0
}
}
}

// Somewhere, you do this:
$emit('input', {
consumption: this.consumption,
energy: this.energy,
})

Answer 2

由于访问null(consumption['Janeiro'] = null(的模型时发生错误

我建议您在data函数中初始化consumption和energy。

这是我的代码：

data() {
const months = [
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro",
];
const consumption = {};
const energy = {};
const initialValue = {
rush_hour: 1,
normal_hour: 2,
};
months.forEach((month) => {
consumption[month] = { ...initialValue };
energy[month] = { ...initialValue };
});
return {
months: months,
consumption: consumption,
energy: energy,
}
}

这是代码沙盒。希望得到帮助！