Дочерний элемент не обновляет реквизиты после изменения данных, поступающих от apollo в nuxt / vue

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

Решением было размещение элементов данных непосредственно как свойство компьютера. (без пересчета)

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>

Answer 2

Ваше вычисленное свойство campaignName возвращает undefined cuz this.campaign.name не определено

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

Затем вы можете использовать его непосредственно в заголовке

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