Setting vuex state properties in a method

Hi

Let’s say I have something like this:

state:{
fields:[
{id:1, name:'Baltic Avenue'},
{id:2, name:'Mediterranean Avenue'},
{id:3, name:'Oriental Avenue'},
{id:4, name:'Vermonet Avenue'},
]

}

…and I want to add another property to each object in this array, like houses, so final effect is:

fields:[
{id:1, name:'Baltic Avenue',houses:0},
{id:2, name:'Mediterranean Avenue',houses:0},
{id:3, name:'Oriental Avenue',houses:0},
{id:4, name:'Vermonet Avenue',houses:0},
]

But I’d rather use a loop than menial repeating of every property.
I’ve tried

//mutation
  init(state, payload) {
            for(let i=0;i<state.fields.length;i++){
                Vue.set(state.fields[i].houses,0);
                console.log(state.fields[i].houses);
            }
        }
//main.js
new Vue({
  store,
  mounted(){
    this.$store.dispatch('init');
  },
  render: function (h) { return h(App) }
}).$mount('#app')

But it throws an error:

Cannot set reactive property on undefined, null, or primitive value: undefined

Sorry, it was:

Vue.set(state.fields[i],'houses',0);

Hi

Vue set needs three arguments, Vue.set(object, propertyName, value). So use:

Vue.set(state.fields[i], 'houses', 0);