Traté de convertir una función simple a vanilla js y el primer bloque de código funciona bien, pero está sucediendo algo extraño y parece que no puedo entender cómo hacer que esto funcione. Todo lo que intento hacer aquí es tener una conversión directa y este código no funciona.

aquí está el código original con jquery

 const obj = { updateProductImages() { var $slideshow = $('[data-product-images]') $('.swiper-pagination').html(''); $slideshow.html('') this.selected_product.images.forEach((image, index) => { $slideshow.append(` <div id="Image${image.id}" class="Product__SlideItem Carousel__Cell" data-image-position="${index}" data-image-id="${image.id}"> <div class="pw-ratio"> <div class="pw-ratio__fill"></div> <div class="pw-ratio__inner"> <img src="${_utils.resizeImage(image.src, 'x1600')}" /> </div> </div> </div> `) }) } }

El código anterior funciona perfectamente, pero estoy refactorizando un sitio para usar solo js para poder dejar de importar jquery.

aquí está mi código refactorizado:

 const obj = { updateProductImages() { //var $slideshow = $('[data-product-images]') const $slideshow = document.querySelectorAll('[data-product-images]') //$('.swiper.pagination').html('') document.querySelector('.swiper-pagination').innerHTML = '' //$slideshow.html('') $slideshow.forEach(item => { item.innerHTML = '' }) this.selected_product.images.forEach((image, index) => { $slideshow.forEach(item => { item.insertAdjacentHTML('beforeend', ` <div id="Image${image.id}" class="Product__SlideItem Carousel__Cell" data-image-position="${index}" data-image-id="${image.id}"> <div class="pw-ratio"> <div class="pw-ratio__fill"></div> <div class="pw-ratio__inner"> <img src="${_utils.resizeImage(image.src, 'x1600')}" /> </div> </div> </div> `) }) } } }

No puedo creer que haya pasado horas en esto, en algo que debería ser fácil de arreglar. El código en el segundo bloque no funciona, también intenté usar $slideshow += `...` y tampoco funcionó.