vue2.0 uses axios to request data, gets the request data in the callback function, and then assigns a value to the variable to loop, but the rendering is invalid. If I write the data to death, I can render it successfully.
here is the code
<template>
<div>
<div v-for="item in objects" class="box">
<el-row>
<el-col :span="18">
<div class="boxCon">
<div class="title">{{item.title}}</div>
<div class="text">
<span class="pubtime">222</span>
<span class="reply">{{item.collect_count}}</span>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content bg-purple-light">
<img src="../../static/img/1_02.jpg" class="pic">
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data(){
return{
objects:[]
}
},
methods:{
lookDetail(e){
var target=event.target;//
var dataid=e;//(pl.id);//
/* this.$router.push({name: "detail"}) */
this.$router.push({ path: "detail",query:{id:dataid} })
}
},
mounted:function(){
$.ajax({
url: "http://api.douban.com/v2/movie/top250",
type: "GET",
data:{"start":"0","count":"10"},
dataType: "JSONP",
success: function (res) {
var self=this;
console.log(res.subjects);
self.objects=res.subjects;
}
})
}
}
</script>
personally, I think the rendering is invalid because the assignment is not successful, but the data has been requested back, or the data has not been requested at the time of initialization, but the page has been rendered. Please give us a lot of advice, thank you
