How to call a method on each element during list rendering?

Question

Vue.js

<div class="profiles">
  <canvas width="50" height="50" v-for="p in profiles" :data-avatar="p.avatar"></canvas>
</div>

let app = new Vue({
    el: '#app',
    data: {
        profiles: []
    },
    methods: {
        renderAvatars () {}
    },
    mounted: function () {
      this.profiles.push({
                name: 'test',
                avatar: 0
      });
    }
});

How do I call the renderAvatars method on every iteration when rendering each canvas element?

Answer 1

Put on ref elements, in mounted (first render) / updated (subsequent renders) call the desired method. You just need to remember that the positions of the object in the array and the reference to the corresponding element are not guaranteed to match, so you have to set the correspondence manually (for example, using the data attribute). How it might look . And it is better of course to make a separate component .

Answer 2

With standard vue tools, this, it seems, cannot be done. You can use render functions to control the output.
Read here https://ru.vuejs.org/v2/guide/render-function.html
You can hack the method call when changing the DOM ( DOMNodeInserted DOMNodeRemoved ), but this is terrible shit. Can I get more details on the issue? What do you want to achieve in the end? What are the processes there?

Answer 3

It seems to me that it makes sense to put the canvas in a separate component and start rendering in mounted (). So all the logic will be in one place, and you won’t have to worry about the $refs array.