I have this getter this.getHouseTypes it returns an array with objects from the vuex store.
But now i want to append 1 item to the array in the shortest way so i was thinking about ... like:
return [...this.getHouseTypes, newObject];
But that gives me an error:
Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
Does anyone know why this is ?
Any help is welcome !
EDIT: but in the vue inspector it shows the new array with this.getHouseTypes and newObject in it
Sounds more like you should do something like this:
import { mapGetters } from 'vuex'
export default {
data() {
return {
houseTypes: [],
}
}
// ...
computed: {
addHouseType(newType) {
let houseTypes = this.getHouseTypes();
this.houseTypes = this.houseTypes.concat(houseTypes).push(newType);
return this.houseTypes;
},
// mix the getters into computed with object spread operator
...mapGetters([
'getHouseTypes',
// ...
])
}
}
Have a data variable houseTypes, which is an empty array in the beginning.
Mix your getters, with your computed.
Have a computed that adds values to the local houseTypes and merges the store state.
Depending on what you are doing, you might want to split the adding and retrieving the new array.