Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript asyncData中意外的setTimeout(获取数据中的nuxt/无计时)_Javascript_Vue.js_Nuxt.js_Nuxtjs - Fatal编程技术网

Javascript asyncData中意外的setTimeout(获取数据中的nuxt/无计时)

Javascript asyncData中意外的setTimeout(获取数据中的nuxt/无计时),javascript,vue.js,nuxt.js,nuxtjs,Javascript,Vue.js,Nuxt.js,Nuxtjs,我正在尝试从我的页面/posts/index.vue页面运行代码。但我一直收到一条错误消息,上面说:“asyncData中意外的setTimeout”。我不知道那是什么意思。有人能帮忙吗?我还需要其他插件吗 <template> <div class="postspage"> <section class="introduction"> </section> <PostList :

我正在尝试从我的页面/posts/index.vue页面运行代码。但我一直收到一条错误消息,上面说:“asyncData中意外的setTimeout”。我不知道那是什么意思。有人能帮忙吗?我还需要其他插件吗

<template>
  <div class="postspage">
   <section class="introduction">
   </section>
   <PostList :posts="loadedPosts" />
  </div>
</template>

<script>
import PostList from '@/components/Posts/PostList'

export default {

middleware: 'log',

components: {
PostList
},

asyncData (context, callback) {
setTimeout(() => {
callback(null, {
  loadedPosts: [
    {
      id: 'Post1',
      title: '1st post',
      previewText: 'This is post number 1',
      thumbnail: 'https://www.pexels.com/video/5899816/'
    },
    {
      id: 'Post2',
      title: '2nd post',
      previewText: 'This post number 2',
      thumbnail: 'https://www.pexels.com/video/5899816/'
    }
  ]
  })
 }, 1500)
},

 created () {}

}

从“@/components/Posts/PostList”导入PostList
导出默认值{
中间件:“日志”,
组成部分:{
帖子列表
},
异步数据(上下文、回调){
设置超时(()=>{
回调(null{
装载的邮件:[
{
id:“Post1”,
标题:“第一篇文章”,
previewText:“这是1号帖子”,
缩略图:'https://www.pexels.com/video/5899816/'
},
{
id:‘Post2’,
标题:“第二篇文章”,
previewText:“此帖子编号2”,
缩略图:'https://www.pexels.com/video/5899816/'
}
]
})
}, 1500)
},
已创建(){}
}

预计
异步数据
将直接返回数据,该数据将合并到组件(页面)
数据
。您不需要设置计时器或调用回调。试着这样做:

async异步数据(){
返回{
装载的邮件:[
{
id:“Post1”,
标题:“第一篇文章”,
previewText:“这是1号帖子”,
缩略图:'https://www.pexels.com/video/5899816/'
},
{
id:‘Post2’,
标题:“第二篇文章”,
previewText:“此帖子编号2”,
缩略图:'https://www.pexels.com/video/5899816/'
}
]
}
},
asyncData
返回一个对象,然后可以使用组件方法中的
this.loadedPosts
或HTML模板中的双花括号(如
{{loadedPosts}
)访问数据

如果需要从API获取该数据,可以等待API响应的结果。Nuxt文档对此有更多详细信息:
谢谢Collin Allen,我刚刚尝试了这个功能,它似乎也能正常工作(刚刚删除了setTimeout函数:

asyncData (context, callback) {
callback(null, {
  loadedPosts: [
    {
      id: '1',
      title: 'First Post',
      previewText: 'This is my first post!',
      thumbnail: 'https://www.pexels.com/video/5899816/'
    },
    {
      id: '2',
      title: 'Second Post',
      previewText: 'This is my second post!',
      thumbnail: 'https://www.pexels.com/video/5899816/'
    }
  ]
}, 1500)
},