VueJS 中的计算属性

Posted 2023-02-23

【中文标题】VueJS 中的计算属性

【英文标题】：computed property in VueJS

【发布时间】：2017-08-23 07:20:06

【问题描述】：

我有一个对象数组：

[
  
    "value": 4,
    "text": "All Belgium Kendo Federation"
  ,
  
    "value": 33,
    "text": "All United States Kendo Federation"
  ,
  // more objects of similar key/value
]

我想创建一个以 id 作为参数的计算属性，这样我就可以获取带有值的文本。

所以，我试试：

computed: 
        federationSelectedText: function () 

            this.federations.find(function (elt) 
                return elt.value == this.federationSelected;
            );
        
    ,

this.federationSelect 是值。

在 html 中 federationSelectedText

我调试了变量，this.federations和this.federationSelected都有正确的值

什么都不显示，我做错了什么？

【问题讨论】：

计算函数中的elt 是什么？

【参考方案1】：

您需要返回 value 并为 find 绑定 this

computed: 
        federationSelectedText: function () 

            return this.federations.find(function (elt) 
                return elt.value == this.federationSelected;
            .bind(this));
        
    

获取一个变量：

computed: 
            federationSelectedText: function () 

                var value = this.federations.find(function (elt) 
                    return elt.value == this.federationSelected;
                .bind(this));

                return value ? value.text : '';
            
        

【讨论】：

成功了。我应该总是在计算属性中使用 bind() 吗？

没有。这取决于用例。当您在 map,filter,... 中使用 function 时，this 的含义正在发生变化。尝试在javascript中检查this的含义。

如何获取文本属性？我似乎很容易，但做不到：8

你摇滚！感谢您的大力帮助！