Vue3点击按钮操控列表项DOM元素的问题及解决办法

你通过v-for渲染列表并尝试用ref获取元素，但当前拿到的是自定义组件实例而非原生DOM，无法直接操控。可以通过以下步骤解决：

1. 修改点击事件传递索引 #

给按钮的点击事件传递当前项的索引i，明确要操作的列表项：

<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(i)" id="fbtn">{{ follower.btn }}</button>
</socialDiv>

2. 通过$el访问原生DOM并操作 #

在点击事件处理函数中，利用$el属性从组件实例中获取原生DOM节点，之后即可进行DOM操作：

<script setup>
import { ref } from 'vue'
const followerDiv = ref({})

function handleBtnClick(i) {
  // 获取目标项的原生DOM元素
  const targetElement = followerDiv.value[i].$el
  // 示例：修改背景色
  targetElement.style.background = "red"
}
</script>

说明 #

因为socialDiv是自定义组件，ref绑定后获取到的是组件实例对象，而非直接的原生DOM元素。$el是Vue组件实例的属性，指向组件挂载的根DOM节点，通过它就能对列表项的DOM进行各种操作。

内容的提问来源于stack exchange，提问作者user19540948