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

dxpyg8gm  于 2023-03-31  发布在  Vue.js
关注(0)|答案(3)|浏览(123)

关于我正在做的事情的一些基本信息。为了我试图弄清楚这一点,而不是透露所有信息,我将输入必要的信息来理解问题。这是使用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";
  })

它没有发布字符串,而是将对象显示为按钮文本。我不明白什么?
我也试过将字符串值存储在数据属性中并显示出来。也没有成功。我希望文本是条件语句中的两个字符串值之一。

m4pnthwp

m4pnthwp1#

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

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

wtlkbnrh2#

您可以使用Array.find作为一行解决方案。

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

jv4diomz3#

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

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>

相关问题