javascript - Vue JS 为另一个计算属性的每个键值运行计算属性

Question

我有一个计算属性:

relateditems () {
 return this.related.find((relation) => {
  return relation.id === this.currentItem.id
 })
},

输出如下:

relateditems:Object
   -KQ1hiTWoqAU77hiKcBZ:true
   -KQ1tTqLrtUvGnBTsL-M:true
   id:"-KQ1if2Zv3R9FdkJz_1_"

我正在尝试创建另一个计算属性，然后循环遍历 relateditems 对象并找到与前两个键的匹配 ID 的关系。

以下行不通，但我认为它给出了思路:

relateditemsdata () {
 let test = []
 for (var key in this.relateditems) {
  this.items.find((relateditem) => {
   relateditem.id === key.id
    test.push(relateditem)
   })
  }
  return test
}

Answer 1

我认为在另一个计算属性中调用计算属性不是一个好方法，因此您可以添加一个观察者属性以观察第一个计算属性并根据该属性更新数据对象属性，例如:

data() {
  return {
    relateditemsdata: [],
  }
},

computed: {
  relateditems() {
    return this.related.find(relation => {
      return relation.id === this.currentItem.id
    })
  },
},

watch: {
  relateditems(val) {
    for (var key in this.relateditems) {
      this.items.find(relateditem => {
        relateditem.id === key.id
        relateditemsdata.push(relateditem)
      })
    }
  },
},