Get The Calling Element With Vue.js

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

Solution 1:

You could get the element from the event like this:

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

And then:

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

Or (if you want to pass another parameter):

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

[demo]

Solution 2:

Youre doing it the wrong way.

newVue({
    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

newVue({
    el: "#app",
    data: {  

    },
    methods: {

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

});

Solution 3:

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

<divv-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 objectmethods: {
    testFunction : function() {
        $(this.$els.myElement).doSomethingWithIt();
    }
}