Vue中如何通过v-model访问并自动创建嵌套对象

问题原因 #

直接使用v-model="consumption[month].rush_hour"会报错，核心原因是：你的consumption初始是空对象，consumption[month]这个子对象还未创建，Vue无法直接给不存在的对象添加深层属性，导致双向绑定失败。

解决方案 #

方案1：初始化时预创建嵌套结构（推荐） #

在data初始化阶段，就为每个月份生成对应的嵌套对象结构，让v-model能直接绑定到已有属性上，这是最省心的方式。

修改你的JS代码：

var app = new Vue({
    el: "#app",
    data() {
        const months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
        
        // 批量生成每个月份的空结构
        const buildMonthData = () => {
            return months.reduce((result, month) => {
                result[month] = { rush_hour: '', normal_hour: '' };
                return result;
            }, {});
        };

        return {
            months,
            consumption: buildMonthData(),
            energy: buildMonthData(),
        }
    }
})

你的HTML代码不需要修改，直接保持原来的v-model绑定即可，输入内容时会自动填充到对应的嵌套属性里。

方案2：动态创建嵌套对象（适合按需生成场景） #

如果不想提前初始化所有月份的结构，可以在输入事件中先判断并创建子对象，确保属性存在后再绑定：

先修改HTML中的input（以consumption的rush_hour为例）：

<input type="text" class="form-control" inputmode="decimal" 
       @input="makeSureMonthObj(consumption, month)"
       v-model="consumption[month].rush_hour">

然后在Vue实例中添加methods：

var app = new Vue({
    el: "#app",
    data() {
        return {
            months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            consumption: {},
            energy: {},
        }
    },
    methods: {
        makeSureMonthObj(targetObj, month) {
            // 若当前月份的子对象不存在，用$set创建（保证响应式）
            if (!targetObj[month]) {
                this.$set(targetObj, month, { rush_hour: '', normal_hour: '' });
            }
        }
    }
})

效果验证 #

采用方案1后，输入数据时会自动生成你期望的嵌套结构：

{
  "consumption": {
    "Janeiro": {
      "rush_hour": "1",
      "normal_hour": "2"
    },
    "Fevereiro": {
      "rush_hour": "1",
      "normal_hour": "2"
    }
    // 其余月份结构同理
  },
  "energy": {
    "Janeiro": {
      "rush_hour": "1",
      "normal_hour": "2"
    }
    // 其余月份结构同理
  }
}

内容的提问来源于stack exchange，提问作者R. bell