Child 元素在 nuxt/vue 中来自 apollo 的数据发生变化后不更新道具

Question

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

我想动态更新标题和面包屑数据字段并在页面上显示它们。当前页面 page 显示 undefined 或 null。我该如何解决这个问题？

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

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

我正在使用 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 returns 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>

Child 元素在 nuxt/vue 中来自 apollo 的数据发生变化后不更新道具

Child element not updating props after change in data coming from apollo in nuxt/vue

vue.js

apollo-client

nuxt.js

vue-props