nuxt / vue中的动态更新数据标题元素

Question

我想动态更新标题和面包屑数据字段，并将其显示在页面上。当前页面页面显示未定义或为空。我该如何解决？

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

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

我正在使用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 cuz this.campaign.name未定义

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

然后您可以直接在头部使用它

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