Vuejs -基于其他计算属性的计算属性

Question

我尝试从另一个计算属性中获取一个计算属性，如下所示：

var instance = new Vue({
    el: "#instance",
    data: {
        aha: ""
    },
    computed: {
        len: function(){
            return this.aha.length;
        },
        plus : function(){
            return this.len + 2;
        }
    }
});

这不管用。当我尝试显示plus时，我在模板中得到了NaN。有没有办法做到这一点呢？this question的答案对我不起作用。

Answer 1

您正在尝试访问类型为number的length字段。

this.len为number，因此this.len.length未定义。您只需要使用this.len

var instance = new Vue({
    el: "#instance",
    data: {
        aha: ""
    },
    computed: {
        len: function(){
            return this.aha.length;
        },
        plus : function(){
            return this.len+ 2;
        }
    }
});

Answer 2

组件中的data属性必须是一个函数，因此在您的示例中，它应该这样编写：

data () {
 return {
   aha: ""
 }
}