Vuex/Nuxt에서 선택 양식 바인딩

Vuex/Nuxt에서 선택 양식 바인딩

나는 binding을 시도하고 있다.selectv-model을 사용하여 vuex 스토어에 필드를 입력합니다. 그러나 상태를 업데이트할 때 선택 기능이 작동하는 것처럼 보이지만 프런트 엔드 선택 상자에 표시되는 내용은 변경되지 않습니다.

HTML 템플릿에 있는 선택 태그입니다.옵션에서 반복하는 방법에는 문제가 없는 것 같습니다.

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

이것은 나의 계산된 속성입니다.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를 프레임워크로 사용하는 것도 처음이라 모르는 문제나 문서가 있는지 모르겠습니다.

미래에 이것에 갇힌 사람들은, 그건 내가 물건으로 그 페이로드를 통과시켰기 때문이다. return this.$store.commit('user/setRole', { payload })다음과 같이 해야 합니다.return this.$store.commit('user/setRole', payload)

언급URL : https://stackoverflow.com/questions/58433166/binding-select-forms-in-vuex-nuxt