How to target an element that has been rendered in a for loop - VUE


Is there a way to target an element through a ref/ID that has been rendered within a for loop within Vue? The for loop I have, renders different amounts of elements each time, these elements are all hidden at first, but when one is opened I want a way of grabbing that opened element through an ID or ref so I can read the height of it when opened.

An example of something I thought would work is this. When the condition for foo is true, it will show the element (this part works), but I also want to add the ref 'bar', only when that condition for foo is true. I understand that I am using a ref like a class here, but I thought it would display what I am trying to achieve.

<div v-show="foo === 'foo_' + name" :ref="{'bar':(foo === 'foo_' + name)}">
---------------Answer---------------

try computed property for this

<div v-show="foo === 'foo_' + name" :ref="getRefName">

Assuming that either name or foo is the iteration element, you can pass it as argument to the computed property if necessary and inside computed

computed: {
  getRefName(arg) {
   // Below is how you deal with arguments
   return arg => {
    if(condition) return 'some String';
   }
  }
}

Previous : how can i order a date struct in c?
Next : Get data from database and write it back in again