vue.js - 在 nuxt/vue 中来自 apollo 的数据发生变化后，子元素不更新道具

Question

更新：主要问题似乎是道具只更新一次。当 this.campaign.name 可用时，它们应该更改。

我想动态更新标题和面包屑数据字段并将它们显示在页面上。当前页面页面显示未定义或为空。我怎样才能解决这个问题？

我试图创建一个计算值，但它似乎只更新一次（在头部和面包屑数据已经显示之后）。方法不起作用，因为我没有任何东西可以触发该方法。

解决此问题的正确方法是什么？

我正在使用 nuxt generate 来部署应用程序。

export default {
  components: { PageHeader },
  middleware: 'authenticated',
  data() {
    return {
      title: 'Campaigns' + this.campaignName,
      breadcrumb: [
        {
          text: 'Campaigns',
          href: '/'
        },
        {
          text: this.campaignName,
          href: '/'
        }
      ],
      campaign: ''
    }
  },
  apollo: {
    campaign: {
      prefetch: true,
      query: campaignQuery,
      variables() {
        return { id: this.$route.params.id }
      }
    }
  },
  computed: {
    campaignName() {
      return this.campaign && this.campaign.name
    }
  },
  head() {
    return {
      title: this.title
    }
  }
}
</script>

Answer 1

您的计算属性campaignName返回undefined因为this.campaign.name未定义

campaignName() {
      if(this.campaign && this.campaign.name) return "Campaigns" + this.campaign.name;
      return "default value";
    }

然后就可以直接在head中使用了

head() {
    return {
      title: this.campaignName
    }
  }

Answer 2

解决方案是将数据元素直接作为计算机属性。（所以没有重新计算）

export default {
  components: { PageHeader },
  middleware: 'authenticated',
  data() {
    return {}
  },
  apollo: {
    campaign: {
      prefetch: true,
      query: campaignQuery,
      variables() {
        return { id: this.$route.params.id }
      }
    }
  },
  computed: {
    title() {
      return this.campaign && `Campaign: ${this.campaign.name}`
    },
    breadcrumb() {
      return [
        {
          text: 'Campaign',
          href: '/'
        },
        {
          text: this.campaign && this.campaign.name,
          href: '/'
        }
      ]
    }
  },
  head() {
    return {
      title: this.title
    }
  }
}
</script>