Vuejs - How to call a method on load event on element Vuejs - How to call a method on load event on element vue.js vue.js

Vuejs - How to call a method on load event on element


That's because a list item (li) does not emit a native load event.The next best thing you can do is wait for Vue's next rendering cycle to finish and then call your method. That way you're guaranteed that the whole loop has finished rendering.

In order to wait for the rendering cycle to finish, we need to use Vue's nextTick() utility method:

import VueSweetalert2 from 'vue-sweetalert2';Vue.use(datePicker);Vue.use(VueSweetalert2);Vue.use(VeeValidate);export default {    name: "modal",    components: {        draggable,    },    mounted() {      this.$nextTick(() => {        this.test();      });    },    methods: {        test(){            alert('load');        }    }}

In this example, we use nextTick's callback version. There's also a promise-based version:

mounted() {  this.$nextTick().then(this.test);}

Or if you're familiar with async/await:

async mounted() {  await this.$nextTick();  this.test();}

Note that this does not fire the test method for each question.options item.If you wish to do that, I guess your only option is to still use nextTick and then inside test loop through question.options once more and call a method for each option.

If you provide some more background on what you're trying to achieve, maybe we can find a more optimal route.

PS! Welcome to StackOverflow 👋