[Vuejs]-How to commit multiple nested values that are supposed to be in the same Vuex Store object and that are not mapped to the store object?

by

0👍

You cannot use v-model in order to change the Vuex state, that is what the mutations are for.

v-model is just syntatic sugar and handles the event and updating of values. You have to implement v-on:change yourself and call a Vuex mutation to set the selected option.

Your selectOptions array looks unusual. Usually you just have a label and a value for options. The value is the selected value when the user selects an option.

<template>
    <div>
        <select @change="onChange">
            <option v-for="option in selectOptions" :value="option.value">
                {{ option.label }}
            </option>
        </select>
    </div>
</template>

<script>
export default {
    data () {
        return {
            selectOptions: [
                //...
            ],
        }
    },
    methods: {
        onChange(event) {
            this.$store.commit('setSelectedOption', event.target.value);
        },
    },
};
</script>

Leave a comment