首页 新闻 赞助 找找看

vue.js nuxt asyncData如何用。下面的代码如何赋值

0
悬赏园豆:120 [待解决问题]
<template>
<section>
<div class="wrapper-banner">
<el-carousel :interval="4000" height="143px">
<el-carousel-item v-for="item in imgList" :key="item">
<li class="banner-main h100 d-b">
<img :src="doMain + item" alt="">
</li>
</el-carousel-item>
</el-carousel>
</div>
</section>
</template>
<script>
import gloableconfig from '../../plugins/globalconfig/globalconfig'
import axios from 'axios'

export default {
data () {
return {
imgList: [],
   doMain: 'www.biadu.com'
}
},
async asyncData ({params}) { // 运行状态监测
let bannerUrl = globalconfig.getUrl('bannerUrl')
await axios.post(bannerUrl, {
img_static: '4'
}).then(function (response) {
console.log(response)
let a = response.data.data
console.log(a)
return { imgList: a }
})
}
}
</script>
Web邵艳峰的主页 Web邵艳峰 | 初学一级 | 园豆:2
提问于:2017-12-12 14:38
< >
分享
所有回答(1)
0

你把asyncImgList 赋值给imgList; 把asyncData定义到methods中;最后mounted中调用asyncData函数;

 

这是我写的代码;

悟行 | 园豆:12559 (专家六级) | 2017-12-12 14:51

我现在做的是服务端渲染。asyncData方法会在组件(限于页面组件)每次加载之前被调用。我已经拿到值了。asyncData这个方法无法通过 this 来引用实例的对象。所以我的值不清楚如何附上去。

支持(0) 反对(0) Web邵艳峰 | 园豆:2 (初学一级) | 2017-12-12 14:59

@抽象ID: 不可以 报错信息:“Cannot set property 'imgList' of undefined” 告诉我未定义

支持(0) 反对(0) Web邵艳峰 | 园豆:2 (初学一级) | 2017-12-12 15:23

@前端小神: 

定义一个全局变量,都用全局变量处理这个获取数据:dataList

文件util.js 中添加:
export default {
  install(Vue, options) {
   Vue.prototype.dataList=[];
  }
}

main.js 中注册
import util from './util'
Vue.use(util);
支持(0) 反对(0) 悟行 | 园豆:12559 (专家六级) | 2017-12-12 15:32

@前端小神:  你也可以选择用这种方法:

https://segmentfault.com/q/1010000008012317?_ea=1521490

支持(0) 反对(0) 悟行 | 园豆:12559 (专家六级) | 2017-12-12 15:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册