Question

这是我在 pages 目录下名为“index.vue”的页面，文件夹“blogs”。

<template>
  <blog-grid :v-if="blogsList.length>0" :v-for="item in blogsList" :item="item"></blog-grid>
</template>

<script>
export default {
      async asyncData(context) {
        let $axios=context['$axios']
        let res = await $axios.$get('http://localhost:3001/blogs')
        return {
          blogsList: res.blog_items,
        }
      },
    created() {
          console.log(this.blogsList)
    }
  }
</script>

我在控制台中得到 blogsList，一切正常。现在我希望该组件获得它的道具“项目”，但没有。这是components文件夹下的blog-grid.vue

<template>
  <div :id="item.id"></div>
</template>

<script>
  export default {
    props: ['item'],
    data(){
      console.log(this.item)
    },
    mounted(){
      console.log(this.item)
    }
  }
</script>

我在这里得到两个 undefined 和 nuxt 错误，即“项目”未正确注册。

这是一个普通的 Vue 组件行为，可以在浏览器中工作，但不能在 Nuxtjs 中工作。我通过了道具，有什么问题吗？

更让我烦恼的是，相同的结构在另一个页面文件夹“产品”中起作用，只是不明白。

我在这里做错了什么？为什么 prop 没有通过？

UPD：如果我在 index.vue 中将变量“item”更改为“index”，它会失败并出现错误“index”未定义但在渲染期间被引用。哇哈特？？？

UPD：如果我将 asyncData 更改为：

return {
          blogsList: res.blog_items[0],
        }

并摆脱循环，只需传递项目然后一切顺利，没有错误。所以麻烦在于数组循环。 Typeof 显示 Object, Array 很好，我在这里看不到任何问题。完全被绊倒了。

UPD：我犯了最愚蠢的错误。我找到了，它就在这里

<blog-grid :v-if="blogsList.length>0" :v-for="item in blogsList" :item="item"></blog-grid>

v-if 和 v-for 是 v 有界的，不应该是。我的天哪，真恶心。

Answer 1

我犯了最愚蠢的错误。我找到了，它就在这里

<blog-grid :v-if="blogsList.length>0" :v-for="item in blogsList" :item="item"></blog-grid>

v-if 和 v-for 是 v 有界的，不应该是。我的天哪，真恶心。

更新了我的答案

Answer 2

EDIT2：好的，这里是整个项目的 github repo。它在 Netlify 上托管（静态如此）：https://use-nuxt-fetch-hook-on-api.netlify.app/
它完全对 SEO 友好，因为它是 Nuxt 预先完成的 SSR 工作。即便如此，它使用了fetch() hook，您完全可以在源代码（ctrl + u）中找到“Clementina DuBuque”，因为它是在大量时间生成的。您还可以通过在此特定页面上禁用 Javascript 来仔细检查这一点。

所以，总结一下您的最新评论：

<块引用>

因为你认为 asyncData 的劣势是错误的，因为它更适合 SEO 导向

这里的 SEO 完全一样。 SSR 部分在构建时没有任何好处。

<块引用>

它有效且不低劣，不应仅仅因为您认为如此或不习惯就声称它低劣。

如果您愿意，我可以通过在此处粘贴我自己的评论来重复自己。在这里，一切都得到了正确的解释：
“asyncdata 只是不如 fetch，因为它阻塞了页面，用户需要在过程中等待，没有任何视觉反馈，也没有超级好的体验。你可以使用 skeleton (buefy. org/documentation/skeleton) 和 fetch，这样它就会加载页面，继续加载数据并像 facebook、youtube 等一样显示它。您也无法访问方便的帮助程序，您只能依靠您的自己的逻辑：更多的代码，更多的错误可能。你也不能在 asyncData 中使用它，也不能从缓存中受益（timestamp 助手）”

我推荐这个是因为它确实有这些好处，除了您如何处理整体数据之外。我对他们两个都很满意。只是说在我看来，fetch 更好。不过，如果您不喜欢我的，我还是提供了一个包含这两种实现的示例。 :D

<块引用>

好吧，我的错误不是 asyncData 与 Fetch。

您的问题确实也与 v-for 和 v-if 有关。这就是为什么我给你写了一个没有这个错误的例子。对不起，如果我应该更强调它。

也就是说，我不知道你为什么对我提供的免费帮助如此咄咄逼人。我只是尽力帮助你。如果你不想点赞、接受或其他什么，你做你自己。这里没有难受的感觉。很遗憾，当有人给您时间解决您的问题时，您确实有这种态度。

也就是说，即使不尝试我的一些解决方案也不提供与问题相关的代码也没有建设性。是的，不幸的是，如果您有这些反应，我可能会避免花更多时间。

编辑：不是 IMO 推荐的方式，但仍然是相同代码的 asyncData 变体：https://codesandbox.io/s/use-nuxt-async-data-hook-on-api-nisfj?file=/pages/index.vue

我在这里为您编写了一个示例：https://codesandbox.io/s/use-nuxt-fetch-hook-on-api-5ymdz?file=/pages/index.vue

它向您展示了如何：

使用 fetch 钩子，不要与 fetch("https://jsonplaceholder.typicode.com/users") 钩子混淆！
如何使用 $fetchState.pending 助手
我添加了一个 delay 函数，只是为了让您更好地了解它的工作原理
正确设置孩子的道具

index.vue

<template>
  <div class="p-4">
    <div v-if="$fetchState.pending" class="loading">Loading...</div>
    <span v-else-if="$fetchState.error">Error...</span>
    <display-item
      v-else
      v-for="item in items"
      :key="item.id"
      :item="item"
    ></display-item>
  </div>
</template>

<script>
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

export default {
  async fetch() {
    await delay(3000);
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const json = await response.json();
    console.log("json", json);
    this.items = json;
  },
  data() {
    return {
      items: [],
    };
  },
};
</script>

DisplayItem.vue（孩子）

<template>
  <div>{{ item.name }}</div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

NuxtJs 没有将 prop 传递给子组件

2 个答案: