NuxtJs没有将prop传递给子组件

Question

这是我的网页名称"index.vue"在pages目录下，文件夹"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，一切正常。现在我期望组件得到它的道具"道具"，但是没有。这是博客网格。Vue在components文件夹

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

我在这里得到了两个undefined和下一个错误"item"未正确注册。

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

更让我恼火的是，同样的结构在另一个页面"产品"文件夹中也能起作用，千万别理解。

我在这里做错了什么?为什么提案没有通过?

UPD:如果我改变变量"item"说"索引"在索引。如果它失败了，会出现错误"index"未定义，但在渲染期间引用。Wwhhaatt ? ?

UPD:如果我改变asyncData返回这个:

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

和摆脱循环，只是传递项目然后它运行顺利，没有错误。数组循环的问题是。Typeof显示对象，数组很好，这里没有问题。完全偶然。

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

<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。它是托管(静态所以)在netflix这里:https://use-nuxt-fetch-hook-on-api.netlify.app/
这是完全SEO友好，因为它是next做它的SSR工作提前。即使它使用的是fetch() hook，你完全可以找到，比如Clementina DuBuque"在源代码(ctrl + u)中，因为它是在构建时生成的。您也可以通过禁用此特定页面上的Javascript来重复检查。

那么，总结一下你最近的评论:

1. 因为你是错误的自卑asyncData，因为它是更好的SEO导向

SEO在这里是完全相同的。在构建过程中，SSR部分对任何一方都没有好处。

2. 它工作，并不差，不应该仅仅因为你这么认为或不舒服就声称它是差的。

如果你愿意，我可以通过粘贴我自己的评论来重复我的话。这里，一切都得到了正确的解释:
"asyncdata只是不如fetch，因为它阻塞了页面，用户需要在过程中间等待，没有任何视觉反馈，也没有超级好的体验。您可以使用skeleton(buefy.org/documentation/skeleton)和fetch，这样它将加载页面，继续加载数据并像facebook, youtube等一样显示它。您也无法访问方便的帮助程序，而是依赖于自己的逻辑:代码越多，可能出现的bug就越多。您也不能在asyncData中使用它，也不能从缓存(timestamphelper)中获益">

我推荐这样做，因为它确实有这些好处，除了如何处理数据之外。我对他们两个都很满意。我认为fetch比较好。尽管如此，如果您不喜欢我的实现，我还是提供了一个包含这两种实现的示例。: D

3. 我的错误不是asyncData vs 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(child)

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