为什么我的按钮文本没有根据我在 Vue JS 中的计算方法动态更改？

Question

关于我正在做的一些基本信息。为了我想弄清楚这一点，而不是透露所有的信息，我会输入必要的信息来理解问题。这是使用VUE JS。

我试图更新一个按钮的文本与一个方法称为text ->{{text}}//

这是我正在处理的:

someName: [
{
someKey: "someValue"
},
{
someKey: "notSomeValue"
},

我的text方法位于computed properties部分内部，如下所示:

text() {
return this.someName.filter(u => {
return u.someKey === "someValue" ? "turn off" : "turn on";
})

它不发送字符串，而是将对象显示为按钮文本。我有什么不明白的吗?

我也试过将字符串值存储在数据属性中并显示它。也没起作用。我希望文本是条件语句内的两个字符串值之一。

Answer 1

你可以这样修改你的文本方法，你返回一个数组它应该返回一个字符串

text() {
const filteredArray = this.someName.filter(u => {
return u.someKey === "someValue";
});
return filteredArray.length > 0 ? "turn off" : "turn on";
}

Answer 2

可以使用Array。求一行解

text() {
return this.someName.find(u => u.someKey === 'someValue') ? 'turn off' : 'turn on';`
}

Answer 3

您可以简单地通过Array.some()方法实现这一点，因为如果someName数组的任何对象包含someValue，它将返回true，然后基于此我们可以返回按钮文本。

Live Demo:

new Vue({
el: '#app',
data: {
someName: [
{
someKey: "someValue"
},
{
someKey: "notSomeValue"
}
]
},
computed: {
text() {
return this.someName.some(obj => obj.someKey === 'someValue') ? "turn off" : "turn on"
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button>{{ text }}</button>
</div>