Question

（注意：我不是在询问如何使用watch）。

我有这个表单模板，并希望将它绑定到在Vuex商店中跟踪的某些变量（例如objectvalue3）（注意：在一个页面上可能存在不同的表单，因此props.formname告诉表格在哪里看。）

<template>
    <div>
    Tracking formname_:{{formname_}}:
        <form method="post" autocomplete="off">
            <input type="text" name="objectvalue3" :value="objectvalue3" />
            <input type="submit" class="btn btn-primary btn-success" value="Track" @click.prevent="write">        
        </form>
    </div>
</template>
....
props: {
    formname: {
        type: String,
        default: "main"
    }
},

在data中跟踪它不工作 - 即表单没有更新 - 它只是保留了vuex初始化为的值：

data: function() {
    return {
        formname_: this.formname
        ,objectvalue3: this.$store.state.tracker[this.formname].objectvalue3
},

但使用computed有效。

computed: {
    objectvalue3: function() {
        return this.$store.state.tracker[this.formname].objectvalue3
    }

我知道在需要进行计算时我必须使用computed。但这里没有真正的计算方法。除非，是否可以通过this.formname进行散列查找，告诉表单查看哪个tracker属性会导致直data失败？这是特定于vuex吗？

Answer 1

请改为尝试：

data: function() {
    return {
        formname_: this.formname,
        tracker: this.$store.state.tracker[this.formname]
},

然后：

<input type="text" name="objectvalue3" :value="tracker.objectvalue3" />

这应该有效，因为数据的tracker对象指向商店中的对象，然后每当值发生变化时，它也会在tracker对象中发生变化。

computed有效，因为它会侦听其中使用的变量的变化，而数据则不会因为它在执行时应用第一个值而不跟踪变化。

对于vuex绑定，Vue：计算vs data（）？

1 个答案: