Get caller with vue.js

Question

I want to get the html caller in vue.js to change it through jQuery. At the moment, I give each element a class name + index and call it through jQuery afterwards, but it 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 caller:

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

What can I pass to a function to get a div element, or is there another way to achieve this?

Answer 1

You can get an element from an event as follows:

 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

You are doing it wrong.

 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 application.

you need to create a 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. 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(); } }