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

Posted 2023-02-23

【中文标题】如何通过 __vue__ 访问循环项的对象？

【英文标题】：How can I access a loop item's object through __vue__?

【发布时间】：2018-11-17 12:45:36

【问题描述】：

我正在 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。

【问题讨论】：

为什么要这样获取item？

很复杂，这本质上是伪代码，试图找到答案

我想不出你需要这样做的原因，但__vue__ 只是对根 Vue 的引用，所以items 数据数组就是el.__vue__.items .

match方法中的Item与items中的item完全相同。

【参考方案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])

【讨论】：

我可能解释错了。我正在尝试将 selection.js 库转换为 Vue 组件。本质上，当单击 DOM 元素时，它会返回一个 event.target - 我试图从中获取对呈现它的对象的引用。当我对 __vue__ 进行比较 (===) 时，我得到了错误的结果。

【参考方案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!