I am facing a challenge in my vue app where I need to access a specific element, but there are multiple duplicate elements generated through a component. The issue is that the ref attribute only seems to work on the first component. How can I target a particular element among these duplicates?
The key idea here is that the component below receives a prop called "type", which could potentially serve as a unique identifier for the ref.
Is there a way to either (a) create a variable dynamically based on the props.type value, or (b) reference a specific div within multiple instances of components?
In the Main.vue file, Component.vue is rendered multiple times. However, if the ref within the component has a static name, it appears to work only on the first instance and not on subsequent ones.
The ultimate goal is to be able to scroll to the clicked div within one of these multiple components.
Main.vue
<div v-for="(m, i) in array"
:key="i" >
<Component
:type="m"
/>
</div>
Component.vue
<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>