클래스 기반 Vue 구성 요소가 v-model 및 vuex와 함께 작동하지 않음

클래스 기반 Vue 구성 요소가 v-model 및 vuex와 함께 작동하지 않음

다음 사항을 달성하고 싶다.나는 양식 입력을 가지고 있고 그것을 vuex에 있는 해당 저장 상태의 값에 바인딩할 필요가 있다.

• 사용자 상호 작용을 통해 필드의 값이 변경될 때마다 스토어를 업데이트된 값으로 덮어쓰게 된다.
• vuex 저장소에서 값이 업데이트될 때마다 필드에 업데이트된 값이 표시됨

다음 코드 조각은 이 코드를 매우 잘 설명해야 한다.

<template>
    <b-form-input
      :id="inputField.id"
      :placeholder="inputField.placeholder"
      :disabled="inputField.disabled"
      v-model="input"
</template>

<script lang="ts">
    import ...

    @Component
    export default class InputWrapper extends Vue {
        @Prop() element!: Input

        inputField: Input = new Input(this.element)

        get input (): string {
            return this.$store.getters.getInputById(this.inputField.id).value
        }

        set input (value: string) {
            this.inputField.value = value
            this.$store.commit('setInput', this.inputField)
        }
    }

</script>

위의 예제는 사용자가 GUI에서 변경한 모든 값에 대해 업데이트된 값을 저장하지만, vuex에서 해당 저장된 인스턴스의 값을 변경해도 필드에 업데이트된 값 대신 이전 값이 표시된다.

상단의 목록에서 설명한 기능을 어떻게 달성할 수 있는가?클래스 기반 구성 요소에서 이것이 어떻게든 가능한가?

스토어 값을 초기화하셨습니까?초기화되지 않은 저장소 값을 가지면 대개 vuex 저장소 내에서도 반응하지 않는 속성이 발생한다.

참조URL: https://stackoverflow.com/questions/63468152/class-based-vue-component-does-not-work-with-v-model-and-vuex