How can I access a loop item's object through vue?

Question

I'm rendering a list in Vue and trying to implement some collision detection. I'm looking to return the exact same object as 'item' through [DomElement].__vue__

Is there a property on __vue__ that matches the object of the item? Where is this stored?

data:

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

component:

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

method:

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

EDIT:

A bit more information on why I'm doing this:

I'm trying to convert the selection.js library into a Vue component. Essentially when a DOM element is clicked, it returns an event.target - and from that I'm trying to get a reference back to the object that rendered it. When I run a comparison between the item object from the loop and the item's [DOMelement].__vue__ I get a false result.

I know the item and the item's dom __vue__ property are the same, but they're not returning true in comparison checks ===.

It's complicated, this is essentially psuedo code to try and find the answer — JCraine
– JCraine, Commented Jun 7, 2018 at 15:02
I can't conceive of a reason why you would need to do this, but __vue__ is just a reference to the root Vue, so the items data array would just be el.__vue__.items. — Bert
– Bert, Commented Jun 7, 2018 at 15:15
The Item in the match method is the exact same object as the item in items. — reinerBa
– reinerBa, Commented Jun 7, 2018 at 15:17

reinerBa · Accepted Answer · 2018-06-07 15:21:03Z

1

The Item in the match method is the exact same object as the item in items. Arrays do only store references on objects, item is no object than you have reason to get the same. v-for can give you also an index, use it to get property in the items array items[idx]

component:

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

  {{ item.name }}
</icon>

method:

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

answered Jun 7, 2018 at 15:21

reinerBa

1,6601 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JCraine Over a year ago

I probably explained myself wrong. I'm trying to convert the selection.js library into a Vue component. Essentially when a DOM element is clicked, it returns an event.target - and from that I'm trying to get a reference back to the object that rendered it. When I run a comparison (===) against __vue__ I get a false result.

JCraine · Accepted Answer · 2018-06-08 01:56:29Z

0

I managed to solve this by storing a reference on itself.

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

  {{ item.name }}
</icon>

then..

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

answered Jun 8, 2018 at 1:56

JCraine

1,4733 gold badges26 silver badges44 bronze badges

Collectives™ on Stack Overflow

How can I access a loop item's object through vue?

EDIT:

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related