I have a simple div with a v-for loop that displays items on a page. These items have a class on them which I would like to select using Javascript's querySelector method.
<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>
Even though I am waiting for the DOM to render using nextTick(), the function loadFeed() cannot pick up on any item that is in the v-for loop.
I need to detect items in the v-for loop so that I can implement an infinite scroll feature where more items are loaded as the user scrolls to the bottom of the list of .product-item elements (hence :last-of-type pseudo selector)
Where is it going wrong and is it possible to select elements this way?
Try to set ref on div with class="product-item"
<div ref="el" v-for="Product in ProductFeed" :key="Product.ProductID" class="product-item" >
then in setup function :
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}
Please, use refs for that just add ref attribute to the container ref="productFeed" and get this element with
import { ref } from 'vue'
...
const productFeed = ref(null)
...
return {
productFeed
}
Then you can use productFeed.value as a variable, containing dom element