Tengo un div simple con un bucle v-for que muestra elementos en una página. Estos elementos tienen una class que me gustaría seleccionar usando el método querySelector de Javascript.
<div class="product-feed"> <div v-for="Product in ProductFeed" :key="Product.ProductID" class="product-item" > <Product-Vue-Component :Product="Product"></Product-Vue-Component> </div> </div> <script> ... setup() { async function loadFeed(){ await nextTick(); let element1 = document.querySelector('.product-feed'); console.log(`element1`, element1) // this works and displays the element let element2 = document.querySelector('.product-item:last-of-type'); console.log(`element2`, element2) // this comes back as null } } onMounted(()=> { loadFeed(); }) } ... </script> Aunque estoy esperando que el DOM se renderice usando nextTick() , la función loadFeed() no puede seleccionar ningún elemento que esté en el bucle v-for .
Necesito detectar elementos en el bucle v-for para poder implementar una función de desplazamiento infinito en la que se carguen más elementos a medida que el usuario se desplaza hasta el final de la lista de elementos .product-item (por lo tanto, :last-of-type pseudo selector)
¿Dónde está fallando y es posible seleccionar elementos de esta manera?
Intente establecer ref en div con class="product-item"
<div ref="el" v-for="Product in ProductFeed" :key="Product.ProductID" class="product-item" >luego en la función de configuración:
const el = ref(null) onMounted(() => { loadFeed() }) async function loadFeed(){ await nextTick(); let element1 = document.querySelector('.product-feed'); console.log(`element1`, element1) // this works and displays the element console.log(el.value) } } return {el}Por favor, use refs para eso, simplemente agregue el atributo ref al contenedor ref="productFeed" y obtenga este elemento con
import { ref } from 'vue' ... const productFeed = ref(null) ... return { productFeed }Luego puede usar productFeed.value como una variable, que contiene el elemento dom
Intenta usar referencias como esta:
<div v-for="Product in ProductFeed" :ref="`product--${Product.id}`"> </div>