Vue: v-for에서 메소드를 사용하지만 Getter가 준비되지 않음

Vue: v-for에서 메소드를 사용하지만 Getter가 준비되지 않음

내 템플릿에 이름을 가져오는 방법을 사용하는 v-for가 있어.v-for는 페이지 로드에 즉시 적중되고 각 인덱스에 대한 메소드를 통해 실행되므로pages나는 보통 처음 몇 루프는 정의되지 않았다.let pages = this.$store.getters['section2/getPages']이 문제를 해결할 더 좋은 방법이 있을까?

템플릿:

<div class="target-box-child" v-for="(target,index) in this.$store.getters['liveDashboard/getDesiredTargets']" :key="index">
   <div>{{ getGroupOrPageName(target) }}</div>
</div>

methods: {
  getGroupOrPageName: function(target) {
    if (target.type == "page") {
      let pages = this.$store.getters['section2/getPages'];
      if (!pages || pages.length == 0) {
        return;
      }
      pages.filter(page => {
        return page.id == target.id;
      })
      return "FB Page: " + pages[0].name;
    }
  },
}

항상 그렇듯이, 템플릿의 일부를 렌더링하는 방법을 사용하는 것은 좋지 않은 생각이다.

대신, 두 가지 모두에 반응하는 페이지 배열을 만들기 위해 계산된 속성을 만들 것이다.liveDashboard/getDesiredTargets그리고section2/getPages줍는 사람들

또한 당신은 또한 그것을 사용할 수 있다.mapGetters그 긴 게터들 이름들 중 일부를 줄여주는 도우미.

<div class="target-box-child" v-for="targetPage in targetPages" :key="targetPage.id">
   <div>FB Page: {{ targetPage.name }}</div>
</div>

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters("liveDashboard", {
      targets: "getDesiredTargets" // alias "liveDashboard/getDesiredTargets" as "this.targets"
    }),
    ...mapGetters("section2", {
      pages: "getPages" // alias "section2/getPages" as "this.pages"
    }),
    targetPages: ({ targets, pages }) => {
      // create a map for easy location
      const pagesById = (pages ?? []).reduce((map, page) =>
        map.set(page.id, page), new Map())
    
      // find the "page" target IDs
      const targetIds = targets.filter(({ type }) => type === "page")
        .map(({ id }) => id)

      // now build up an array from the target IDs
      return targetIds.reduce((arr, id) => {
        if (pagesById.has(id)) {
          arr.push(pagesById.get(id))
        }
        return arr
      }, [])
    }
  }
}

당신은 당신의 게이터를 위해 계산된 속성을 만들어야 한다.가장 좋은 방법은 보일러 판 코드를 줄이기 위해 mapGetter를 사용하는 것이다.

import { mapGetters } from 'vuex'

 computed: {
...mapGetters('liveDashboard', ['getDesiredTargets']),
}

그런 다음 템플릿에서 v-for 루프 앞에 v-if 조건을 추가하십시오(이유는 다음과 같다).

<template v-if="getDesiredTargets">
<div class="target-box-child" v-for="(target,index) in getDesiredTargets" :key="index">
   <div>{{ getGroupOrPageName(target) }}</div>
</div>
<template />

참조URL: https://stackoverflow.com/questions/64202252/vue-using-a-method-in-a-v-for-but-the-getter-isnt-ready