Typescript 基于类的Vue组件不适用于v-model和vuex

Typescript 基于类的Vue组件不适用于v-model和vuex,typescript,vue-component,vuex,bootstrap-vue,vue-property-decorator,Typescript,Vue Component,Vuex,Bootstrap Vue,Vue Property Decorator,我希望实现以下目标:我有一个表单输入,需要将其绑定到vuex中相应存储状态的值 每当通过用户交互更改字段中的值时,存储就会被更新的值覆盖 无论何时在vuex存储中更新该值,该字段都会显示更新后的值 下面的代码段应该能很好地描述它: <template> <b-form-input :id="inputField.id" :placeholder="inputField.placeholder"

我希望实现以下目标:我有一个表单输入,需要将其绑定到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>


您是否初始化了存储值?
具有未初始化的存储值通常会导致非反应性属性,即使在vuex存储中也是如此。

您在模板中使用了
:id=“inputField.name”
,但在脚本中使用了
getInputById(this.inputField.id).value
。这不就是你问题的原因吗?说得好,但不幸的是,事实并非如此。输入中既有名称也有id。我可以很容易地交换它(已经在编辑中做了),它将导致相同的问题。谢谢你的回答。其实我早就解决了这个问题,忘记了这篇文章。我对整个概念进行了重组,因此很难说这是否是解决方案的一部分。