VueJS3：如何获取循环内子元素的DOM引用？

方案一：用响应式数据控制样式（Vue推荐方式） #

直接操作DOM不是Vue的最佳实践，优先通过响应式数据绑定来控制样式：

1. 给items数组的每个对象添加width属性，比如初始值设为默认宽度：

// 示例items数据
items: [
  { id: 1, width: '100px' },
  { id: 2, width: '100px' },
  // ...其他项
]

2. 在模板中把width绑定到sub-item的样式上：

<div class="list-item" v-for="item in items" :key="item.id">
  <div class="sub-item" :style="{ width: item.width }"></div>
</div>

3. 需要修改指定ID（比如X=1）的元素宽度时，直接更新对应item的width属性：

const targetItem = this.items.find(item => item.id === X)
if (targetItem) {
  targetItem.width = '200px' // 这里可以是任意需要的宽度值
}

方案二：直接获取DOM元素引用（必要场景使用） #

如果必须直接操作DOM，可以通过动态绑定ref来存储指定元素的引用：

1. 在组件的data中定义一个对象，用来按ID存储sub-item的引用：

data() {
  return {
    subItemRefs: {} // 键为item.id，值为对应sub-item的DOM元素
  }
}

2. 在模板中给sub-item绑定ref的回调函数，将元素按ID存入对象：

<div class="list-item" v-for="item in items" :key="item.id">
  <div class="sub-item" :ref="el => { if (el) this.subItemRefs[item.id] = el }"></div>
</div>

3. 获取指定ID的sub-item元素并修改宽度：

// 获取ID为X的元素
const targetEl = this.subItemRefs[X]
// 确保元素存在后修改样式
if (targetEl) {
  targetEl.style.width = '200px'
}

注意事项 #

• 组件挂载完成后才能获取到ref引用，所以如果是初始化时需要操作，要放在mounted钩子或者this.$nextTick()中执行。
• 当列表项更新时（比如新增/删除），ref回调会自动更新subItemRefs对象，无需手动维护。

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