I need to access an element in a vue app. However, there are multiple duplicate elements generated via a component. So the ref only works on the first component. How do I target a specific element of duplicate elements?
The component below gets the prop type, and it would serve as the unique name of the ref.
How do I either (a) create a variable that has the name of the props.type, or (b) reference a div that is within multiple components.
<template>
<div :ref="type">text</div>
</template>
<script>
import {
onBeforeUpdate,
reactive,
ref,
} from 'vue';
props: {type: {type: String}}
export default {
setup() {
const div = ref(null);
onMounted(() => {
div.value = props.type;
});
return {
div,
};
},
};
</script>