Vue: Access corresponding DOM element onClick() in v-repeat item

[timavo]

I got a list of users which are displayed with v-repeat.

HTML:

<ul id="vue">
    <li v-repeat="user in users" v-on="click: onClick(user)">@{{ user.name }}</li>
</ul>

JavaScript:

new Vue({
    el: '#vue',

    data: {
        users: [
            { name: 'Berta' },
            { name: 'Delta' },
            { name: 'Anton' },
            { name: 'Echo' },
            { name: 'Charlie' }
        ]
    },

    methods: {
        onClick: function(user) {

            // Perform jQuery actions on DOM element like: 
            // if($(this).hasClass('active')) { ... }
            // $(this).effect('shake)';

        }
    }
});

How can I access the corresponding DOM element to the clicked user? I want to perform some jQuery actions...

Thanks a lot! :-)

[yyx990803]

Please post questions to vuejs/Discussion.

v-on="onClick(user, $event) then in your function you can access event.target.

[timavo]

Merci beaucoup! And thanks for the tip with vuejs/Discussions!

[potasiyam]

I am having an weird problem with event.target.
Suppose i have an anchor like this,
<a href="#p12" v-on:click="showDetails()">details</a>
when I click it the event.target is the anchor which is perfect.

But if I write the a tag with font-awesome like this,
<a href="#p12" v-on:click="showDetails()"><i class="fa fa-angle-down"></i></a>
then the event.target becomes the i tag from inside of a.

And again if I write like
<a href="#p12" v-on:click="showDetails()"><i class="fa fa-angle-down"></i> details</a>
everything is as it is supposed to be, event.target becomes the a tag.
You can check this with $(event.target)[0].nodeName
Not sure if this issue belongs to be this thread or a new thread.

[simplesmiler]

Hello @potasiyam

This is a usage question, and we encourage you to ask it on forum or gitter. We try to use the issue tracker for bug reports and feature requests.

As for the question, use event.currentTarget when you need the node that has the listener is on.

[S-Amin]

I hope solve someone problem. we can use the vue.$ref:

<ul id="vue">
    <li v-for="(user, i) in users"  
         v-on:click="onClick('u'+i)" 
         v-bind:ref="'u'+i">{{ user.name }}</li>
</ul>

and in your onClick function you can access it like this:

onClick: function(user) {
                  var element = this.$ref[user];
        }