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*/})
  }
}

Answer 2

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();
  }
});

if this doesnt work you may want to call the .grid after a timeout function for

Answer 3

actually v-for works with life-cycle hooks and it's not working with the first render of vue on DOM it goes with UPDATE DOM so if you put any function after UPDATED it will be called after V-for

enter code here

methods:{
},

updated({
//your code
}