在html中用axios返回的数据,渲染dom
<div class="top">
<div v-for="item of content.content" class="dpw">
<img :src="item.url" alt="item.text" class="pw">
<span class="jj">{{item.ctitle}}</span>
<p>{{item.name}}</p>
</div>
</div>
想操作渲染的dom,但是貌似不行this.nextTick()也不行,还是我用错了?
import jQuery from 'jquery'
export default {
data () {
return {
content:[]
}
},
methods : {
show () {
this.$nextTick(function () {
jQuery(".jj").hide();
jQuery(".top > div").hover(function(){
jQuery(".jj",this).slideToggle(500);
jQuery("img",this).animate({
opacity: 0.1
},1,function(){
jQuery(".top > div").mouseleave(function(){
jQuery("img",this).animate({
opacity: 1
},1)
})
});
});
});
},
getData () {
this.$http({
url: `http://192.168.1.108:3000${this.$route.path}`,
method: 'get'
}).then((res) => {
this.content = res.data;
}).catch((res) => {
console.log('error:', res)
})
}
},
beforeRouteUpdate(to, from, next) {
this.$http({
url: `http://localhost:2000/getjson${to.path}`,
method: 'get',
}).then((res) => {
this.content = res.data;
}).catch((res) => {
console.log('error: ', res);
});
next();
},
mounted() {
this.show();
this.getData();
}
}
放在
getData
请求成功后就可以了