Question

如何在 Vue 中更新自身计算的数据？

2020-06-11

1955

vue.js

就我而言，我想在计算中更新自身数据。如以下示例所示：

var example = new Vue({
    el: '#example',
    data: {
        Foo: []
    },
    computed: {
        Bar: {
            // getter
            get: function(){
                return 'data'
            },
            // setter
            set: function(newValue){
                this.Bar = newValue
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example">
    <p>Original message: "{{ Bar }}"</p>
</div>

如何在计算中更新 Bar？

Answer 1

这些 getter setter 将被视为代理，

您需要从中获取某些内容，以及将设置某些内容。

解决您的问题的一个简单方法是：

{
    el: '#example',
    data: {
        Foo: [],
        bar: 'data'
    },
    computed: {
        Bar: {
            // getter
            get: function(){
                return this.bar
            },
            // setter
            set: function(newValue){
                this.bar = newValue
            }
        }
    }
}

Answer 2

可能您的意思是 this.Foo = ？

        var example = new Vue({
            el: '#example',
            data: {
                Foo: []
            },
            computed: {
                Bar: {
                    // getter
                    get: function(){
                        return 'data'
                    },
                    // setter
                    set: function(newValue){
                        this.Foo = newValue
                    }
                }
            }
        })

您正在尝试在更新值中更新值在更新值中... 这当然是递归。