Nuxt.JS (Vue.JS) и VueX связывают форму с массивом объектов в хранилище VueX - PullRequest
Новая
       17

Nuxt.JS (Vue.JS) и VueX связывают форму с массивом объектов в хранилище VueX

0 голосов
/ 04 января 2019

Мне нужна помощь с привязкой формы к списку настроек по умолчанию из массива объектов. Я работаю с NuxtJ и VueX, и это список настроек по умолчанию, которые я создал:

  • name defaultsetting (просто текст)
  • активный (кнопка переключателя, которая определяет настройку по умолчанию, будет активна или нет - логическое значение)
  • обязательно (переключатель, который определяет, будет ли задана настройка по умолчанию или нет - булево)

Это то, что я имею до сих пор.

С помощью Axios я выполняю вызов на стороне сервера для получения списка настроек по умолчанию и отправляю его в хранилище заданий 

        asyncData(context) {
        return context.app.$axios
            .$get('jobs/create')
            .then(data => {            
                context.store.dispatch('jobs/getDefaultsettings', data.defaultsettings)
            })
            .catch(e => context.error(e))
    },

В jobs.js эта функция вызывается: 

getDefaultsettings(context, data) {
    context.commit('setDefaultsettings', data)
},

getDefaultsettings затем фиксирует данные в setDefaultsettings: 

    setDefaultsettings(state, data) {

    data.forEach(function(d) {
        d.mandatory = false
        d.active = false
    })
    state.defaultsettings = data
},

Чтобы в настройках данных были настройки по умолчанию, я сохранил state.defaultsettings в созданной функции. 

        created() {
        this.ruleForm.defaultsettings =  this.$store.state.vacatures.defaultsettings

    }

Но это то, где я запутался. Каков наилучший способ связать данные. Я нашел этот пример: https://vuex.vuejs.org/guide/forms.html,, но я не могу заставить его работать. Я получаю сообщение об ошибке Не могу прочитать свойство 'обязательное' из неопределенного 

<div class="row" v-for="defaultsetting in ruleForm.defaultsettings " :key="defaultsetting.id">
<div class="col-sm-4">
    {{defaultsetting.name}}
</div>
<div class="col-sm-4">
    <el-checkbox v-model="defaultsetting.mandatory" :value="mandatory" @input="updateMandatory"/>
</div>

Я добавил обязательное как вычисляемое свойство: 

        computed: {
        mandatory () { return this.$store.state.vacatures.defaultsetting.mandatory }

    },

И в методах: 

 methods: {

        updateMandatory (e) {
            this.$store.commit('updateMandatory', e.target.value)
        },
    },

И в jobs.js я добавил мутацию: 

updateMandatory (state, setting) {
    state.defaultsetting.mandatory = setting
},

Вся помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 07 января 2019

Я не получил vuex-map-fields для хорошего воспроизведения с Nuxt.JS, поэтому я отобразил данные хранилища в create () 

        created() {
        this.ruleForm.defaultsettings =  this.$store.state.jobs.defaultsettings.map((obj) =>  Object.assign({}, obj))

    }

Теперь, когда перебираем this.ruleForm.defaultsettings, я могу изменить состояние, используя v-модель 

<div class="row" v-for="(defaultsetting, index) in ruleForm.defaultsettings " v-if="defaultsetting.groupsequence === 1"  >
                        <div class="col-sm-4">
                            {{defaultsetting.label}}
                        </div>
                        <div class="col-sm-4">
                            <el-switch
                            style=""
                            v-model="ruleForm.defaultsettings[index].active"

                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            />
                        </div>
                        <div class="col-sm-4" v-if="ruleForm.defaultsettings[index].active === true">
                             <el-checkbox v-model="ruleForm.defaultsettings[index].mandatory"  />
                        </div>
                    </div>
...