VUE3 - VUEX v-model on an object

user_12369920 0
Viewed 56

I am using Vue3's Composition API and would like to store some search parameters in my store.

My state:

const state = () => ({
    selection: {
        selected_cabins: "M",
        flight_type: "round",
        adults: 1,
        children: 0,
        infants: 0,
        pets: 0,
        fly_from: "",
        fly_to: "",
        start_date: "",
        return_date: "",
    },
});

I'm trying to use it like so:

<q-select
  borderless
  :options="flightType"
  v-model="selection.flight_type"
  option-value="value"
  emit-value
  map-options
/>

Computed Property:

const selection = computed({
            get() {
                return store.state.flights.selection;
            },
            set(val) {
                store.commit("flights/SET_SELECTION", val);
            },
        });

But I am still getting the error that I cannot mutate state outside of a mutation.

If I break the object (selections) down to its properties I can get it to work, but thats really verbose. Is there anyway to do the above with an object as I have it?

vuejs3 vue-composition-api javascript
1 Answers

In v-model you're accessing the nested state value which mutates that state, the right syntax should be like :

v-model="flight_type"

and in the setter spread the state with modified property :

const flight_type = computed({
            get() {
                return store.state.flights.selection.flight_type;
            },
            set(val) {
                store.commit("flights/SET_SELECTION", 
                           {...store.state.flights.selection,flight_type:val);
            },
        });
user_81728570
Related