Как зафиксировать несколько вложенных значений, которые должны находиться в одном объекте Vuex Store и которые не сопоставлены с объектом store?

Как это будет работать, если я захочу зафиксировать входное значение и выбранные параметры в хранилище Vuex (без строки «label», чтобы отправляемый объект соответствовал моему объекту хранилища Vuex)?

шаблон

                <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>

Данные

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

Компьютерный

Computed: {

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

хранить

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

                }]
            ],

Всего 1 ответ

Автоматический диспенсер мыльной пены от xiaomi.


Вы не можете использовать v-model для изменения состояния Vuex, для этого и нужны мутации.

v-model является просто синтетическим сахаром и обрабатывает событие и обновление значений. Вы должны реализовать v-on:change себя и вызвать мутацию Vuex, чтобы установить выбранную опцию.

Ваш массив selectOptions выглядит необычно. Обычно у вас просто есть label и value для опций. value - это выбранное значение, когда пользователь выбирает опцию.

<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>

Есть идеи?

10000