如何解决基于类的Vue组件不适用于v-model和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 存储中也是如此。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。