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

Question

我在Vue中渲染列表并尝试实现一些碰撞检测。我希望返回完全相同的对象作为＆＃39; item＆＃39;通过[DomElement].__vue__

__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 - 并且从那里我试图获得一个引用回到渲染它的对象。当我在循环中的item对象和项目[DOMelement].__vue__之间进行比较时，我得到一个错误的结果。

我知道item和商品的dom __vue__属性相同，但在比较检查===中它们并未返回true。

Answer 1

匹配方法中的项目与项目中的项目完全相同。数组只存储对象的引用，item不是你有理由得到的对象。 v-for还可以为您提供索引，使用它来获取项数组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!
}