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

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

0 голосов
/ 15 января 2020

Как это будет работать, если я захочу зафиксировать входное значение и выбранные параметры в хранилище 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 Ответ

0 голосов
/ 16 января 2020

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

v-model - это просто синтаксис c сахар и обрабатывает событие и обновление значений. Вы должны реализовать 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>
...