Vue JS中计算属性无法动态修改按钮文本的问题排查

核心问题：用错了数组方法 #

你当前使用的filter方法，作用是筛选数组中符合条件的元素，返回一个新数组，而非直接返回你需要的字符串。

你的回调里返回的是"turn off"或"turn on"，但filter会把这些字符串转为布尔值（非空字符串均为true），所以最终text计算属性返回的是原数组的所有元素（两个对象组成的数组），绑定到按钮上自然显示对象内容。

正确写法 #

根据需求，你需要判断数组中是否存在someKey === "someValue"的元素，推荐用以下两种数组方法：

方法1：用some判断是否存在符合条件的元素

text() {
  // some遍历数组，只要有一个元素满足条件就返回true
  return this.someName.some(u => u.someKey === "someValue") ? "turn off" : "turn on";
}

方法2：用find找到目标元素后判断

text() {
  // find返回第一个符合条件的元素，找不到则返回undefined
  const hasTarget = this.someName.find(u => u.someKey === "someValue");
  return hasTarget ? "turn off" : "turn on";
}

关于存入data无效的说明 #

之前把计算属性结果存入data仍无效，是因为计算属性本身返回的是数组（对象集合），存入data后依然是数组，绑定到按钮上还是会显示对象，核心问题还是数组方法用错了，换用上面的写法即可解决。

内容的提问来源于stack exchange，提问作者Dom Lo