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

Posted 2023-02-23

【中文标题】基于类的 Vue 组件不适用于 v-model 和 vuex

【英文标题】：Class-based Vue component does not work with v-model and vuex

【发布时间】：2020-12-07 14:39:43

【问题描述】：

我想实现如下：我有一个表单输入，需要将其绑定到vuex中对应存储状态的值。

只要字段中的值通过用户交互发生更改，存储就会被更新后的值覆盖。 每当在 vuex 存储中更新值时，该字段都会显示更新后的值

下面的代码 sn-p 应该可以很好地描述它：

<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 中更改相应存储实例的值，该字段仍将显示旧值而不是更新值。

如何实现顶部列表中所述的功能？这对于基于类的组件是否可行？

【问题讨论】：

您在模板中使用了:id="inputField.name"，但在脚本中使用了getInputById(this.inputField.id).value。这不是你问题的原因吗？

好点，但不幸的是它不是。 Input 中有 name 和 id。我可以轻松地交换它（已经在编辑中做过），它会导致同样的问题。

【参考方案1】：

您是否已初始化您的商店价值？ 具有未初始化的存储值通常会导致非反应性属性，即使在 vuex 存储中也是如此。

【讨论】：

感谢您的回答。实际上我很久以前就解决了这个问题，忘记了这篇文章。我已经重新构建了整个概念，所以很难说这是否是解决方案的一部分。