Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
229 views
in Technique[技术] by (71.8m points)

vue2.0计算属性

最近遇到一个问题,通过比较复杂的表达式的到一个属性,我想到了可以用计算属性computed.但是没有实现. 举例子demo如下:

b是由a属性得到的,即取a的第一条数据的text值。点击按钮只希望给b重新赋值,但是并不改变a。

<button @click="change">dianji</button>

new Vue({
            el: '#app',
            data: {
                a: [
                    {index: 0, text: 'a',},
                    {index: 1, text: 'b',}
                ]
            },
            computed: {
                b: {
                    get: function () {
                        return this.a[0].text
                    },
                    set: function (val) {
                        //点击按钮只改变b的值,不改变a的值,该如何实现??????
                    }
                }
            },
            methods: {
                //点击按钮只改变b的值,不改变a的值
                change: function () {
                    this.b = 101
                },
            },
        }
    );

此处不知如何实现。想实现此需求的话,是不是不能用computed因为b是依赖于a的,但是a在初始化之后就不能变了。是这个原因吗?
要实现此功能的话,还有个办法是在钩子函数created的时候来取得b的值,以后再给b赋值就不需要依赖a,也不会改变a了吧?
请问各位computed的方法怎么实现,或者还有更好的方法吗?

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

之前也遇到过这个问题,结论就是你说的计算属性的值不能脱离其依赖,因为他的值是从get算出来的
从目前来看,你只需要在data中加b,然后再methods的回调中对其重新赋值就可以了,或许你可以再补充下情景。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...