Как вызвать метод на каждом элементе во время рендера списка?

Question

[bqio]

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

Как мне вызывать метод renderAvatars на каждой итерации при рендере каждого элемента канваса?

Answer 1

[0xD34F]

Поставить на элементы ref, в mounted (первый рендер) / updated (последующие рендеры) вызывать нужный метод. Надо только помнить, что не гарантируется совпадение позиций объекта в массиве и ссылки на соответствующий ему элемент, так что устанавливать соответствие придётся вручную (например, с помощью data-атрибута). Как это может выглядеть. А лучше конечно отдельный компонент сделать.

Answer 2

[Виктор К]

Штатными средствами vue, такое, вроде как, не выполнить. Можно использовать рендер-функции, это позволит управлять выводом.
Читать тут https://ru.vuejs.org/v2/guide/render-function.html
Можно закостылить вызов метода при изменении DOM ( DOMNodeInserted DOMNodeRemoved), но это жуткое говно. Можно узнать поподробнее задачу? Чего вы хотите добиться в итоге? Какие там процессы?

Answer 3

[Даниил Братухин]

Мне кажется, имеет смысл вынести canvas в отдельный компонент и запускать отрисовку в mounted(). Так вся логика будет в одном месте, и париться с массивом $refs не придётся.