nuxt js динамический метатег заголовка c изменение при fetch () - PullRequest
Новая
       95

nuxt js динамический метатег заголовка c изменение при fetch ()

0 голосов
/ 27 мая 2020

У меня есть этот компонент в Nuxt js, который отображает контент, полученный с помощью метода fetch из API. API возвращает данные как вложенный объект. Когда я передаю эти данные в метод head () для метатегов, он работает только на один уровень, но не с вложенными данными. Почему?

В этом коде мы назначаем полученные данные const post в компонентах data () this.post = data.response.results[0];. Затем при использовании this.post.webTitle все в порядке, но при использовании this.post.fields.thumbnail возникает ошибка, указывающая, что эскиз не определен. 

export default {
  async fetch() {
    const { data } = await this.$axios.get(
      `api_url`
    );
    this.post = data.response.results[0];
    this.loading = false;
  },
  data() {
    return {
      post: {},
    };
  },
  head() {
    return {
      title: this.post.webTitle ? `${this.post.webTitle.slice(0, 10)}...` : "",
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.post.webTitle,
        },
        { hid: "og-title", property: "og:title", content: this.post.webTitle },
        {
          hid: "og-image",
          property: "og:image",
          content: this.post.fields.thumbnail,
        },
        { hid: "og-image-width", property: "og:image:width", content: 500 },
        { hid: "og-image-height", property: "og:image:height", content: 300 },
        {
          hid: "og-image-type",
          property: "og:image:type",
          content: "image/jpeg",
        },
      ],
    };
  },
};

при отдельном назначении 

this.post = data.response.results[0];
this.thumbnail = data.response.results[0].fields.thumbnail;

data() {
    return {
      post: {},
      thumbnail: "",
    };
  },

, тогда его работа в порядке, II можно использовать: 

this.thumbnail

Я не понимаю, почему не работает в первую очередь? Почему я должен отдельно назначать «более глубокие» данные, чтобы сделать их доступными для компонента?

Заранее спасибо за помощь

1 Ответ

1 голос
/ 27 мая 2020

Это наиболее вероятно потому, что head запускается до того, как fetch сможет вернуть данные. Поскольку this.post определен как объект, доступ к this.post.webTitle разрешен, поскольку он просто не определен. Но this.post.fields.thumbnail пытается получить доступ к thumbnail undefined, что является незаконным.

Если вы измените data на: 

data() {
    return {
      post: {
          fields: {
              thumbnail: ""
          }
      },
    };
  },

Я подозреваю, что это сработает

...