Why does querySelector not work with v-for?-CodePudding

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?

CodePudding user response：

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}

CodePudding user response：

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

CodePudding user response：

Try to use refs like this:

<div v-for="item in list" :ref="setItemRef"></div>