Get the calling element with vue.js

Question

I want to get the calling html element in vue.js to modify it via jQuery. For now I give every element the class name + the index and call it via jQuery afterwards, but this looks like a crazy hack.

What I want to do:

new Vue({
    el: "#app",
    data: {  
        testFunction : function(element) {
            $(element).doSomethingWithIt(); //do something with the calling element
        }
    }
});

This is the calling element:

<div v-on:click="testFunction(???)">Test</div> 

What can I pass into the function to get the div-element or is there another way to achieve this?

Answer 1

You could get the element from the event like this:

new Vue({
    el: "#app",
    methods: {  
        testFunction : function(event) {
            $(event.target).doSomethingWithIt();
        }
    }
});

And then:

<div v-on:click="testFunction">Test</div>

Or (if you want to pass another parameter):

<div v-on:click="testFunction($event)">Test</div>

[demo]