使用vue资源,我可以从我的api中获取数据并设置它,这样我就可以在html中使用它,我的问题是我想在v-for完成后运行一个jquery函数,这样jquery就可以看到我的dom中的元素,这是我的代码:
js
dataUrl = "http://localhost:8081/hesabiha/userSubmissions";
var app = new Vue({
el: "#campaign",
methods: {
getSubmissions: function(){
this.$http.get(dataUrl, function(submissions){
this.$set('submissions', submissions);
});
},
},
ready: function(){
this.getSubmissions();
}
});
html
<div v-for="item in submissions" class="grid-item">
<img v-bind:src="item.field_image[0].url" alt="Hello">
</div>
我正在尝试对我的页面运行此功能:
$('.grid').masonry({
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
它不起作用,是不是有这样的东西,我可以在v-for完成后运行这个jquery函数?
尝试
getSubmissions: function(){
var _this = this
this.$http.get(dataUrl, function(submissions){
this.$set('submissions', submissions);
this.$nextTick(function(){/*here the DOM is ready*/})
}
}
实际上v-for使用生命周期挂钩,它不使用DOM上vue的第一个呈现,而是使用UPDATE DOM,所以如果在UPDATED之后放置任何函数它将在的V之后调用
enter code here
methods:{
},
updated({
//your code
}
dataUrl = "http://localhost:8081/hesabiha/userSubmissions";
var app = new Vue({
el: "#campaign",
methods: {
getSubmissions: function(){
this.$http.get(dataUrl, function(submissions){
this.$set('submissions', submissions);
$('.grid').masonry({
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
});
},
},
ready: function(){
this.getSubmissions();
}
});
如果这不起作用,您可能需要在的超时函数后调用.grid