在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>

这是我要绑定到（selectedRole）的计算属性following the guidelines for a two-way computed property in the docs：

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)