在Vuex / Nuxt中绑定选择表单

Question

我正在尝试使用v-model将select字段绑定到我的vuex存储-但是，虽然选择功能在更新状态时似乎可以正常工作，但它不会更改前端选择中显示的内容框。

这是我在HTML模板中的select标记，我如何遍历选项似乎没有任何问题）：

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

这是我要绑定到（following the guidelines for a two-way computed property in the docs）的计算属性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作为框架，所以我不知道是否存在一些我不知道的问题或文档。

Answer 1

对于将来遇到此问题的任何人，这是因为我将有效负载作为对象传递了……return this.$store.commit('user/setRole', { payload })必须是： return this.$store.commit('user/setRole', payload)