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 loo
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
}
}
});
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();
}
}
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]