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?

pespantelis · Accepted Answer · 2015-12-14 07:04:49Z

13

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]

edited Dec 14, 2015 at 7:04

answered Dec 14, 2015 at 6:54

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ghitu Ilie-Alin Over a year ago

What if you have another element inside? The target would reference the child element if you click on it.

vistajess · Accepted Answer · 2015-12-14 01:21:50Z

0

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
        }
    }

});

answered Dec 14, 2015 at 1:21

vistajess

6791 gold badge9 silver badges24 bronze badges

Comments

ceejayoz · Accepted Answer · 2015-12-14 01:22:01Z

0

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

answered Dec 14, 2015 at 1:22

ceejayoz

181k42 gold badges311 silver badges382 bronze badges

Collectives™ on Stack Overflow

Get the calling element with vue.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related