How to trigger a jQuery function once a v-for loop has completed in VueJS?

Question

How to trigger a jQuery function once a v-for loop has completed in VueJS?

Utilizing vue-resource, I successfully retrieve data from my API and incorporate it into my HTML. However, I am encountering an issue where I want to execute a jQuery function after the v-for loop has completed in order for jQuery to recognize elements in my DOM. Here is the snippet of my code:

Javascript

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 am attempting to trigger this function on my page:

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

Unfortunately, it seems that the function is not working as intended. Is there a way to ensure that this jQuery function runs only after the v-for loop has completed?

javascript vue.js vue-resource

Answer 1

Answer №1

Experiment

fetchData: function(){
  var _self = this
  this.$http.get(dataUrl, function(feed){
    this.$set('feedData', feed);
    this.$nextTick(function(){/*execute when the DOM is fully loaded*/})
  }
}

Answer 2

Experiment

fetchData: function(){
  var _self = this
  this.$http.get(dataUrl, function(feed){
    this.$set('feedData', feed);
    this.$nextTick(function(){/*execute when the DOM is fully loaded*/})
  }
}

Answer 3

Answer №2

When using the v-for directive in Vue, it interacts with the life-cycle hooks of the component. During the initial render of Vue on the DOM, v-for does not take effect. Instead, it works during the update phase of the DOM. Therefore, any functions placed after the updated hook will be executed after v-for.

enter code here

methods:{
},

updated({
//your code
}

Answer 4

When using the v-for directive in Vue, it interacts with the life-cycle hooks of the component. During the initial render of Vue on the DOM, v-for does not take effect. Instead, it works during the update phase of the DOM. Therefore, any functions placed after the updated hook will be executed after v-for.

enter code here

methods:{
},

updated({
//your code
}

Answer 5

Answer №3

dataUrl = "http://localhost:8081/hesabiha/userSubmissions";

var application = new Vue({
  el: "#campaign",
  methods: {
    fetchUserSubmissions: function(){
      this.$http.get(dataUrl, function(submissions){
        this.$set('submissions', submissions);

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

In case the above code does not execute successfully, consider invoking the .grid functionality after a brief timeout period.

Answer 6

dataUrl = "http://localhost:8081/hesabiha/userSubmissions";

var application = new Vue({
  el: "#campaign",
  methods: {
    fetchUserSubmissions: function(){
      this.$http.get(dataUrl, function(submissions){
        this.$set('submissions', submissions);

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

In case the above code does not execute successfully, consider invoking the .grid functionality after a brief timeout period.

How to trigger a jQuery function once a v-for loop has completed in VueJS?

Answer №1

Answer №2

Answer №3

Similar questions

Dynamic Namespaces in Socket.io is a feature that allows for

How can I efficiently extract specific data from JSON using AngularJs?

attach an event listener for the click event

Swapping out image sources using a React Hook that includes an onClick event

Is it not odd that there are two '=>' symbols in an arrow function when there is typically only one? What could this possibly signify?

jQuery mobile : accessibility helper for hidden elements

Iterate through JSON objects

having difficulty obtaining the keyCode/key event while input event is triggered

Arranging and structuring Handlebars templates

The Google Javascript API Photo getURL function provides a temporary URL that may not always lead to the correct photo_reference

Combine strings in an array of objects

Best method for connecting user input with a class

Encountering the error message "require is not defined" in the browser while utilizing gulp-browserify for my React.js modules

Choosing an automatically generated choice from a C# web browser control

What is the best method for storing a client-side token in nextjs 13 with the App Router update?

The function(result) is triggered when an http.get request is made

What could be causing my function to output unicode replacement characters instead?

Reference Error occurs in Vue unit test due to third party dependency issue

Is jquery.validate showing errors more than once?

Generate real-time dynamic line charts using data pulled directly from a MySQL database