Run a jQuery function after v-for is done in vue?

Question

Using vue-resource i am able to get data from my api and set it so i can use it in my html , my problem is i want to run a jquery function after v-for is complete so jquery could see elements in my dom , here is my code :

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>

I'm trying to run this function against my page :

$('.grid').masonry({
    // options...
    itemSelector: '.grid-item',
    columnWidth: 200
  });

It doesn't work , is there anyway so i can run this jquery function after v-for is complete ?

Answer 1

Try

getSubmissions: function(){
  var _this = this
  this.$http.get(dataUrl, function(submissions){
    this.$set('submissions', submissions);
    this.$nextTick(function(){/*here the DOM is ready*/})
  }
}