Vue JS는 다른 계산 속성의 각 키 값에 대해 계산된 속성 실행

Vue JS는 다른 계산 속성의 각 키 값에 대해 계산된 속성 실행

계산된 속성이 있음:

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

다음 출력:

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

다른 계산된 속성을 생성하여 관련 항목 객체를 루프하고 처음 두 키에 대한 일치하는 ID와의 관계를 찾으려고 한다.

다음과 같은 것은 효과가 없지만, 나는 이것이 아이디어를 준다고 생각한다.

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

다른 방법으로 계산된 속성을 호출하는 것은 좋지 않은 방법이라고 생각하므로, 첫 번째 계산된 속성을 보기 위해 감시자 속성을 추가하고 다음과 같은 속성을 기반으로 데이터 개체 속성을 업데이트할 수 있다.

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)
      })
    }
  },
},

네 문제는 부에와 관련이 없는 것 같아.

당신의key.id에 있어서 정의되지 않다.for..in루프를 사용하게 될거야this.relateditems[key]가치에 접근하거나 단지key키에 접근하기 위해서.'id' 키에 대해 다른 어레이를 필터링하지 않으려면 먼저 개체 키도 필터링하십시오.

예시

relatedItems() {
  return this.related.find((item) => {
    return this.item.id == this.currentItem.id;
  });
} // returns first objects with the same id

relatedItemsData() {
  // grabs all keys except 'id'
  const keys = Object.keys(this.relateditems).filter((key) => key != 'id');
  this.items.filter((item) => {
    return keys.indexOf(item.id) != -1; // checks if item.id is inside the keys-array
  });
} // returns again array of objects;

중첩된 루프 대신 Array.prototype을 사용할 수도 있다.위와 같은 필터 함수.

참조URL: https://stackoverflow.com/questions/57538588/vue-js-run-computed-property-for-each-key-value-of-another-computed-property