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]

Answer 2

Youre doing it the wrong way.

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

data is the state or storage of data for your app.

you need to create methods object for your methods

new Vue({
    el: "#app",
    data: {  

    },
    methods: {

    testFunction : function(element) {
            $(element).doSomethingWithIt(); //do something with the calling element
        }
    }

});

Answer 3

You want v-el to be able to run jQuery on it. For example:

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

then:

// as noted by @vistajess
// your function should be in the methods object
// not the data object
methods: {
    testFunction : function() {
        $(this.$els.myElement).doSomethingWithIt();
    }
}