Binding Select Forms в Vuex / Nuxt - PullRequest
Новая
       31

Binding Select Forms в Vuex / Nuxt

1 голос
/ 17 октября 2019

Я пытаюсь привязать поле select к моему хранилищу vuex, используя v-модель - однако, хотя функция выбора, кажется, работает при обновлении состояния, она не меняет того, что отображается в поле выбора внешнего интерфейса.

visual representation of issue

Это мой тег select в шаблоне HTML, похоже, нет проблем с тем, как я перебираю параметры): 

<select v-model="selectedRole">
    <option v-for="option in roleOptions" :key="option.text" :value="option.value">
        {{ option.text }}
    </option>
</select>

Это мое вычисляемое свойство selectedRole, к которому я пытаюсь привязать (, следуя указаниям для двустороннего вычисляемого свойства в документах ): 

computed: {
  selectedRole: {
    get () {
      return this.$store.getters['user/selectedRole']
    },
    set (payload) {
      return this.$store.commit('user/setRole', { payload })
    }
  }
}

А это мой user.js файл с соответствующими мутациями и геттерами: 

export const state = () => ({
  selectedRole: ''
})

export const mutations = {
  setRole (state, payload) {
    state.selectedRole = payload
  }
}

export const getters = {
  selectedRole: (state) => {
    return state.selectedRole
  }
}

Я также впервые использую Nuxt.js в качестве фреймворка, поэтому я незнаю, есть ли какие-то проблемы или документация, о которых я не знаю.

1 Ответ

1 голос
/ 17 октября 2019

Для любого, кто застрял на этом в будущем, это было потому, что я передавал полезную нагрузку как объект ... return this.$store.commit('user/setRole', { payload }) должно быть: return this.$store.commit('user/setRole', payload)

...