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>
所有回答(1)
0
你把asyncImgList 赋值给imgList； 把asyncData定义到methods中；最后mounted中调用asyncData函数；
这是我写的代码；
我现在做的是服务端渲染。asyncData方法会在组件（限于页面组件）每次加载之前被调用。我已经拿到值了。asyncData这个方法无法通过 this 来引用实例的对象。所以我的值不清楚如何附上去。
@抽象ID: 不可以 报错信息：“Cannot set property 'imgList' of undefined” 告诉我未定义
@前端小神:
定义一个全局变量，都用全局变量处理这个获取数据：dataList
文件util.js 中添加： export default { install(Vue, options) { Vue.prototype.dataList=[]; } } main.js 中注册 import util from './util' Vue.use(util);
@前端小神: 你也可以选择用这种方法：
