How can i access and create a nested object with v-model on vue? - vuejs2

Question

I'm new to vuejs and I have a problem with v-model, I want to know if has some way to access a nested object and auto-create with v-model
my 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>
My 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: {},
}
})
I want to create this for example:
{
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
}
}
I Tested only with v-model="Consumption[month]" and worked, but when i use v-model="Consumption[month]['rush_hour']" or v-model="Consumption[month].rush_hour" v-model (Ex: Consumption.Janeiro.rush_hour) throw an error on console.

Answer 1

If you component is increasing in complexity to come to a point like this, you better extract the logic to another component and receive the dynamic values as props so that you have something like:
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

The error occurred because when access model of null (consumption['Janeiro'] = null)
I recommend you init your consumption and energy in your data function.
Here is my code:
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,
}
}
Here is code sandbox.
Hope this help!