JavaScript — Binding Select Forms в Vuex / Nuxt

Binding Select Forms в Vuex / Nuxt

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

визуальное представление вопроса

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

 {amp}lt;select v-model="selectedRole"{amp}gt; {amp}lt;option v-for="option in roleOptions" :key="option.text" :value="option.value"{amp}gt; {{ option.text }} {amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; 

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

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

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

 export const state = () ={amp}gt; ({ selectedRole: '' }) export const mutations = { setRole (state, payload) { state.selectedRole = payload } } export const getters = { selectedRole: (state) ={amp}gt; { return state.selectedRole } } 

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

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector