Binding Select Forms in Vuex/Nuxt

Question

I am trying to bind a select field to my vuex store using v-model – however, while the selection function seems to work when updating the state, it doesn't change what is displayed in the frontend select box.

This is my select tag in the HTML template, there don't seem to be any problems with how I'm iterating over the options):

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

This is my computed property selectedRole which I'm trying to bind to (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 })
    }
  }
}

And this is my user.js file with the corresponding mutations and getters:

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

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

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

This is also my first time using Nuxt.js as a framework, so I don't know if there are some issues or documentation there that I'm unaware of.

Jack Clarke Jack Clarke · Accepted Answer · 2019-10-17T13:24:54

For anyone stuck on this in the future, it was because I was passing the payload through as an object... return this.$store.commit('user/setRole', { payload }) needs to be: return this.$store.commit('user/setRole', payload)

Binding Select Forms in Vuex/Nuxt

1 Answers