如何通过 __vue__ 访问循环项的对象？

Question

我正在 Vue 中渲染一个列表并尝试实现一些碰撞检测。我希望通过[DomElement].__vue__ 返回与“item”完全相同的对象

__vue__ 上是否有与项目对象匹配的属性？这个存储在哪里？

数据：

items: [
    { name: 'one' }, 
    { name: 'two' }
]

组件：

<icon 
  v-for="item in items" 
  @click="match(item, $el)">
      
  {{ item.name }}
</icon>

方法：

match(item, el){
    console.log(item === el.__vue__) // how can I make these match?
    // el.__vue__.whereCanIFindItem ??
}

---

编辑：

关于我为什么这样做的更多信息：

我正在尝试将 selection.js 库转换为 Vue 组件。本质上，当单击 DOM 元素时，它会返回一个 event.target - 我试图从中获取对呈现它的对象的引用。当我在循环中的项目对象和项目的 [DOMelement].__vue__ 之间运行比较时，我得到一个错误的结果。

我知道 item 和项目的 dom __vue__ 属性是相同的，但在比较检查 === 中它们没有返回 true。

Answer 1

match 方法中的 Item 与 items 中的 item 是完全相同的对象。数组只存储对对象的引用，item 不是对象，而不是你有理由得到相同的对象。 v-for 还可以给你一个索引，用它来获取 items 数组中的属性items[idx]

组件：

<icon
  v-for="(item, index) in items" 
  @click="match(item, index, $el)">

  {{ item.name }}
</icon>

方法：

match(item, index, el){
    console.log(this.items[index])
}

Answer 2

我设法通过在自身上存储一个引用来解决这个问题。

<icon 
  v-for="item in items"
  :itemObj="item"
  @click="match(item, $el)">

  {{ item.name }}
</icon>

那么..

match(item, el){
    console.log(item === el.__vue__.itemObj) // true, woo!
}