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

dxpyg8gm 于 2023-03-31 发布在 Vue.js

关注(0)|答案(3)|浏览(124)

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

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

vue.js

来源：https://stackoverflow.com/questions/75883571/why-isnt-my-button-text-not-dynamically-changing-based-on-my-computed-method-in

3条答案

按热度按时间

m4pnthwp1#

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

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

赞(0）回复(0）举报 2023-03-31

wtlkbnrh2#

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

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

赞(0）回复(0）举报 2023-03-31

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>

赞(0）回复(0）举报 2023-03-31

我来回答

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

3条答案

相关问题

热门标签

最新问答