Vuetify v-img组件事件无法获取id的问题求助

问题原因 #

Vuetify的v-img是封装组件，渲染后生成的DOM结构包含外层容器、内部图片元素等，你给v-img设置的id只会绑定在组件的根容器上，而拖拽事件触发时，e.target大概率是v-img内部的子元素（比如<img>标签），这些子元素并没有继承id属性，所以拿不到值。而v-chip这类组件的DOM结构更简单，id直接绑定在可点击的根元素上，所以能正常获取。

可行解决方案 #

方案1：用data属性替代id，通过closest查找 #

把id换成data-id绑定到v-img上，然后在事件处理器里通过closest方法找到最近的带该属性的元素，提取对应值：

<v-img
  v-for="item in imageList"
  :key="item.id"
  :data-id="item.id"
  src="your-image-src"
></v-img>

事件处理代码：

// 拖拽库的事件处理器中
const targetElement = e.target.closest('[data-id]')
if (targetElement) {
  const imgId = targetElement.dataset.id
  // 这里做后续处理
}

方案2：用div包裹v-img，把id绑定到外层div #

如果一定要用id，可以给v-img套一层div，把id绑定到这个div上，同样用closest查找：

<div
  v-for="item in imageList"
  :key="item.id"
  :id="`img-wrap-${item.id}`"
>
  <v-img src="your-image-src"></v-img>
</div>

事件处理代码：

const wrapElement = e.target.closest('[id^="img-wrap-"]')
if (wrapElement) {
  const imgId = wrapElement.id.replace('img-wrap-', '')
  // 后续处理
}

注意点 #

不要直接依赖e.target的属性，封装组件的内部DOM结构可能随Vuetify版本变化，用closest向上查找父元素的方式更稳定，也能适配外部拖拽库无法识别组件类型的场景。

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