I am currently using Vue 3 and I have a requirement to manipulate a specific list item when a button is clicked.
Below is the HTML code snippet:
<socialDiv v-for="(follower, i) in followerList" :key="follower.id" :ref="el => { followerDiv[i] = el }">
<div class="text-md text-gray-800">{{ follower.name }}</div>
<div class="text-sm text-gray-500">{{ follower.username }}</div>
<button @click="handleBtnClick" id="fbtn">{{ follower.btn }}</button>
And here's the script used:
<script setup>
const followerDiv = ref({})
function handleBtnClick() {
console.log(followerDiv.value)
}
</script>
This leads to the following output:
https://i.sstatic.net/TTOoN.png
While I am able to access followerDiv.value[0], I am facing difficulties manipulating the item itself as a DOM element.
What would be the best way for me to access these child items as DOM elements?
Update:
In order to access the list items, it is necessary to add "$el" after value.
The values can be accessed via:
followerDiv.value[i].$el.style.background = "red"