Как добавить разные линки на дивы с одним классом?

Question

[Marten]

Есть условно такие дивы в консоли (не статичный html):

<div data-v-a07d9ad7="" class="spots"><div>
<div data-v-a07d9ad7="" class="spots"><div>
<div data-v-a07d9ad7="" class="spots"><div>

Каждому из них мне нужно дать разную ссылку, можно ли это сделать через appendChild или как-то так.
Была мысль накинуть id-шки сначала а на них посадить линки, через примерно такой код:

function addIds() {
        var divs = document.querySelectorAll('.spot');
        divs.forEach(function (div, index) {
            var uniqueId = 'spot' + (index + 1);
            div.id = uniqueId;
        });
    }
    addIds();

Однако id оно не добавило, потому что у меня html не статичный и формируется через _nuxt с json, соответственно эта конструкция дивов загружается только на определенном этапе скролла, по количеству json-ов.

Как можно реализовать это всё?

Comments

[historydev]

Вешай обработчик после:

только на определенном этапе скрола

[Marten]

Пасиб, но не получается, потому что понятно что код он грузит последовательно, но тема этого nuxt в том что генерация кода идет не в момент открытия страницы, а в момент скрола. И если я кидаю свой js вниз, то он все равно как бы отгружается первым по отношению к отгрузке именно этой части кода.

Я уже в сам nuxt докинул все таки id с инкрементом и теперь эти дивы как бы имеют разные id-шки, но линк все равно не вешает, потому что опять же если вниз js кидаю, то он не понимает, на что эти линки вешать, потому что они идут вгрузкой второго порядка, а в сам nuxt тоже не могу вписать, потому что не фулл мой проект и тогда он пишит что целостность рушится.

[Marten]

он эту часть
Html ки компилирует в canvas