vue.js jquery - access to global function from jQuery method

Question

I am making a simple SPA application in vue.js and I use some jQuery methods. Problem is, I can't use vue's methods inside of jQuery statement. For example: I implemented easyAutocomplete pack for auto completing my input field and need 4 events:

v-on:click="addReceiver"(on button 'add') - done
v-on:enter="addReceiver" (on input field) - done
click on list item - done
enter on list item - done

For now my code (without unnecessary things) looks like this:

export default {
        data() {
            return {
                contacts: [],
                receivers: []

            }
        },
        mounted() {
            this.fetchMessages();

        },
        methods: {
            fetchMessages() {
                axios.get('api/messages').then(response => {
                    this.contacts = response.data.contacts;

                    var options = {
                        data: this.contacts,
                        getValue: "name",
                        list: {
                            match: {
                                enabled: true
                            },
                            onClickEvent: function() {
                                var name = $("#to").getSelectedItemData().name;
                                $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");
                                //this.receivers.push(name); CANT DO THAT ALSO!!!
                            },
                            onKeyEnterEvent: function() {
                                var name = $("#to").getSelectedItemData().name;
                                $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");
                            }
                        } 
                    };

                    $("#to").easyAutocomplete(options);


                });
            },
            addReceiver(){
                var name = $("#to").val();
                $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");

            }
        }
    }

As you can see I need to duplicate my code in many places, because I cant use function addReceiver() inside for example onClickEvent: jquery list function.

Thank you for any help!

you should be able to create a named function outside of the export (before the beginning of this code) with the content of addReceiver and use this reference to declare your other functions like this onClickEvent: yourNamedFunction, and addReceiver(){ yourNamedFunction(); }. References to objects like $ can be inside, as long as it's defined when the function is called, it should be OK — Kaddath
– Kaddath, Commented Aug 23, 2017 at 10:10

Vamsi Krishna · Accepted Answer · 2017-08-23 10:28:38Z

2

this inside options object's method will point to the object itself not the vue instance. Tats the reason

 this.receivers.push(name); //CANT DO THAT ALSO!!!

does not work

Instead define a const vm = this outside the options object pointing the correct vue instance and make use of closure

methods: {
        fetchMessages() {
            axios.get('api/messages').then(response => {
                this.contacts = response.data.contacts;

                const vm = this;

                var options = {
                    data: this.contacts,
                    getValue: "name",
                    list: {
                        match: {
                            enabled: true
                        },
                        onClickEvent: function() {
                            vm.addReceiver();
                        },
                        onKeyEnterEvent: function() {
                            vm.addReceiver();
                        }
                    } 
                };

                $("#to").easyAutocomplete(options);


            });
        },
        addReceiver(){
            var name = $("#to").val();
            this.receivers.push(name);
        }
    }

edited Aug 23, 2017 at 10:28

answered Aug 23, 2017 at 10:18

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

1 Comment

Vamsi Krishna Over a year ago

@GrzegorzG. Edited my answer to reuse addReceiver() have a look

Rwd · Accepted Answer · 2017-08-23 10:30:27Z

You should be able to give your functions inside your options object access the component's scope by using the es2015 shorthand method definition:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

var options = {
    data: this.contacts,
    getValue: "name",
    list: {
        match: {
            enabled: true
        },
        onClickEvent() {
            //You now have access to the component as this
            var name = $("#to").getSelectedItemData().name;
            $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");
            this.receivers.push(name); //You should be able to do this now
        },
        onKeyEnterEvent() {
            //You now have access to the component as this
            var name = $("#to").getSelectedItemData().name;
            $("#list_of_receivers").append("<tr><td>"+name+"</td></tr>");
        }
    }
};

Alternatively, if I'm correct in assuming the addReceiver() method will do the same, you could do:

var options = {
    data: this.contacts,
    getValue: "name",
    list: {
        match: {
            enabled: true
        },
        onClickEvent: this.addReceiver,
        onKeyEnterEvent: this.addReceiver,
    }
};

Hope this helps!

Collectives™ on Stack Overflow

vue.js jquery - access to global function from jQuery method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related