Question

我有这样的nuxt代码

<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提取的标题这是代码Code Sandbox

Answer 1

从asyncData上的docs：

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属性中。

Nuxt head（）不等待head的asyncData响应

1 个答案: