时间戳

首页 > 解决方案 > Vue：在 v-for 中使用方法但 getter 尚未准备好

vue.js - Vue：在 v-for 中使用方法但 getter 尚未准备好

问题描述

我的模板中有一个 v-for，我使用一种方法来获取名称。由于 v-for 在页面加载时立即命中并运行每个索引的方法，pages因此方法中的 i 抓取通常是未定义的前几个循环 ( 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;
    }
  },
}

标签： vue.jsvuex

解决方案

与往常一样，使用方法来渲染模板的某些部分是一个坏主意。

相反，我会创建一个计算属性来生成一个页面数组，该数组对你的liveDashboard/getDesiredTargets和section2/getPagesgetter 都有反应。

您还可以使用mapGettershelper 来减少一些长的 getter 名称

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

推荐阅读