问 题
在html中用axios返回的数据，渲染dom
{{item.ctitle}}
{{item.name}}
想操作渲染的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请求成功后就可以了
getData () {
this.$http({
url: `http://192.168.1.108:3000${this.$route.path}`,
method: 'get'
}).then((res) => {
this.content = res.data;
// 建议把nextTick写show方法外面
this.$nextTick(this.show)
}).catch((res) => {
console.log('error:', res)
})
}
},
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
