[Vuejs]-Two functions called in v-on:click. Wait for rendering to finish before launching the other?

by

0👍

✅

Use Vue.nextTick() when you need to wait for the DOM to finish rendering before executing code. This method is available on every Vue instance via vm.$nextTick.

In your case, it might look like this:

<div class="item parent-track" v-on:click="foo">

methods: {
  foo() {
    this.expandTrack(this.jsonObject.tracks.indexOf(this.track));
    this.$nextTick(this.setGrey);
  }
}

Or, if you really want all that code in your template, you could do this:

<div 
  class="item parent-track"
  v-on:click="expandTrack(jsonObject.tracks.indexOf(track)); $nextTick(setGrey);"
></div>

Leave a comment