在 Vuex/Nuxt 中绑定选择表单

Posted 2023-02-22

【中文标题】在 Vuex/Nuxt 中绑定选择表单

【英文标题】：Binding Select Forms in Vuex/Nuxt

【发布时间】：2020-02-14 09:45:54

【问题描述】：

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

这是我在 html 模板中的选择标签，我如何迭代选项似乎没有任何问题）：

<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 作为框架，所以我不知道那里是否有一些我不知道的问题或文档。

【参考方案1】：

对于将来坚持这一点的任何人，这是因为我将有效负载作为对象传递...return this.$store.commit('user/setRole', payload ) 需要： return this.$store.commit('user/setRole', payload)