Nuxt head () не ожидает ответа asyncData для head - PullRequest
Новая
       35

Nuxt head () не ожидает ответа asyncData для head

0 голосов
/ 30 сентября 2019

У меня есть такой код: 

<template>
  <section>
    <div>Hello Nuxt</div>
  </section>
</template>

<script>
const fetchTheme = () => {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      resolve({
        title: "Fetched Title"
      });
    }, 100);
  });
};

export default {
  async asyncData() {
    const theme = await fetchTheme();
    return theme;
  },

  head() {
    if (this.theme) {
      return {
        title: this.theme.title
      };
    } else {
      return {
        title: "Default title"
      };
    }
  }
};
</script>

<style scoped>
</style>

Пока я просматриваю исходный код, он выдает «Заголовок по умолчанию», но мне нужен заголовок, извлеченный из API. Вот код Песочница для кода

1 Ответ

0 голосов
/ 30 сентября 2019

Из документов для asyncData:

Nuxt.js автоматически объединит возвращаемый объект с данными компонента.

Это означает, чтото, что вы делаете: 

  async asyncData() {
    const theme = await fetchTheme();
    return theme;
  }

аналогично этому: 

  async asyncData() {
    const theme = await fetchTheme();
    return {
      title: theme.title
    };
  }

Это означает, что заголовок доступен с помощью this.title вместо this.theme.title.

Чтобы это исправить, просто измените формат возврата asyncData, чтобы он возвращал объект со свойством темы: 

  async asyncData() {
    const theme = await fetchTheme();
    return {
       theme
    };
  }

Это правильно добавит свойство theme к свойству dataкомпонент.

...