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?

Question

How would it work if I want to commit the input value and the selected options in the Vuex store (without the "label" string so that the object I send matches my Vuex store object) ?

Template

                <div v-for="(section, indexSections) in sections" :key="indexSections">                                
                    <div v-for="(item, indexItem) in section" :key="indexItem">                      
                      <div>

                        <select
                          v-model="sections[indexSection][indexItem].options"                        
                          :options="selectOptions"
                        ></select>

                        <b-input
                          type="text"
                          v-model="sections[indexSection][indexItem].sectionItem"                                                   
                        ></b-input>
                        <b-button @click="removeItem({section,item})"/>  

                      </div>
                    </div>      

                  <div">
                    <b-button @click="addNewItem(section)"/>                                        
                    <b-button @click="addNewSection"/>
                  </div>

                </div>

Data

selectOptions: [
        {
          options: { option1: true, option2: true },
          label: "First"
        },
        {
          options: { option1: false, option2: true },
          label: "Second"
        }      
      ]

Computed

Computed: {

sections: {
      get() {
        return this.$store.state.sections;
      }
    }

Store

sections: [
                [{
                    sectionItem: "",
                    options: {
                        strict: true,
                        includes: true
                    }

                }]
            ],

Right off the bat, a select tag does not have an options attribute. You need to put a v-for on an option tag within your select. Also, your sections property should just be an array of objects, not an array or arrays. — Paul Bovis
If I need to pass multiple sections where each section has multiple items, then it needs to be an array of arrays. It's not so unusual from what I read — donstripe
And a select CAN have an options attribute, just like it is in a multiselect component (vue-multiselect.js.org/#sub-option-groups) — donstripe
vue-multiselect is a custom component. That component can accept an options attribute. Your example is using a select element. There is no options attribute on a select element. — Jesus Galvan
It's my mistake in the stackoverflow question. I do use vue-multiselect in the project — donstripe

Jesus Galvan Jesus Galvan · Accepted Answer · 2020-01-15T21:41:25

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>

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?

1 Answers