Vuetify 구성 요소에서 계산된 속성 및 Vuex와 함께 Vue v-model 바인딩을 사용하는 방법은 무엇입니까?

Vuetify 구성 요소에서 계산된 속성 및 Vuex와 함께 Vue v-model 바인딩을 사용하는 방법은 무엇입니까?

v-radio-group을 Vuex의 계산된 값과 함께 사용하려고 합니다.

당면한 문제의 코드 페이지 예는 다음과 같습니다.

옵션 버튼을 클릭할 때마다 Vuex 변환이 호출되어 선택한 값이 상태에 저장됩니다.
단, 변환 내부에서 일부 검증이 실패하여 예상대로 값이 변경되지 않을 수 있습니다.

Vuex 상태가 되는 값에 관계없이 옵션버튼은 현재 상태를 제대로 반영하지 않습니다.

예: 코드 페이지 스니펫에서 두 번째 옵션을 예상합니다(Option 1)는, 대응하는 상태가 항상 0이기 때문에, 선택된 상태로 표시되지 않습니다.

이 동작은 v-radio-group을 사용할 때만 발생하는 것이 아닙니다.
모든 Vuetify 컴포넌트에서 이 문제가 발생합니다.v-model및 계산된 게터/세터.
예를 들어,Vuetifys v-text-input/v-text-field 및 v-select도 동일한 동작을 보여 줍니다.

요약하자면, 다음과 같은 질문이 있습니다.
대응하는 상태가 다른데도 코드 예의 두 번째 옵션이 선택되는 이유는 무엇입니까?
원하는 결과를 얻으려면 어떻게 해야 합니까?Option 1선택한 상태로 표시되지 않습니다(클릭해도).

제가 알기로는 Vuetify는 다음과 같은 구성 요소에서 자체 상태를 유지합니다.v-radio-group.

변경하려면 업데이트된 소품을 보내야 합니다.그런 다음 반응하여 자신의 상태를 업데이트합니다.

문제는 변환으로 검증을 실행하고 있다는 것입니다.내 생각에 그건 나쁜 관행이야.

상태 변경 및 업데이트를 "차단"하는 방법을 보여 줍니다.v-radio-group즉, 그 자체의 상태는 실제 자신의 상태에 해당하는 것입니다.$store.state.radioState.

그리고 나는 돌연변이를 어떻게 수행할지 알아내는 데 시간을 좀 더 할애할 것이다;-)

이것은 완벽한 솔루션이 아닙니다>> 제 코드펜

1. 네 돌연변이가 상태를 바꿔놨을 뿐이야

// store.js
mutations: {
  setRadioState (state, data) {
    state.radioState = data;
  },
},

2. 당신의.setmethod가 검증을 수행합니다.

// component 
computed: {
  chosenOption: {
    get () { 
      return this.$store.state.radioState;
    },
    set (value) {
      if (value !== 1) {
       this.$store.commit('setRadioState', value) 
      } else {
        const oldValue = this.$store.state.radioState
        this.$store.commit('setRadioState', value)
        this.$nextTick(() => {
         this.$store.commit('setRadioState', oldValue)
        })
      }
    }
  }
}

3. 에서 일어나는 일set검증에 실패했을 때?현재 상태를 다음 위치에 저장합니다.oldValue에 대응하도록 상태를 갱신합니다.v-radio-group요소.그리고 그 안에$nextTick다시 바로 바꿔서oldValue.그와 같이v-radio-group갱신된 소품을 입수하여 상태를 변경합니다.

언급URL : https://stackoverflow.com/questions/59506318/how-to-use-vue-v-model-binding-in-vuetify-components-together-with-computed-prop