如何在vue上访问和创建具有v模型的嵌套对象？

Question

我对vuejs很陌生，我对v-模型有一个问题，我想知道是否有某种方法可以访问嵌套对象和使用v-模型自动创建。

我的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 (Ex: 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)

我建议您将consumption和energy放入data函数中。

这是我的代码：

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,
}
}

这里是代码沙箱。希望能帮上忙！