vue.js jquery - 从 jQuery 方法访问全局函数

Question

我正在 vue.js 中制作一个简单的 SPA 应用程序，并且我使用了一些 jQuery 方法。问题是，我不能在 jQuery 语句中使用 vue 的方法。例如：我实现了用于自动完成输入字段的 easyAutocomplete 包，需要 4 个事件：

• v-on:click="addReceiver"(on button 'add') - 完成
• v-on:enter="addReceiver"（在输入字段上）- 完成
• 点击列表项 - 完成
• 进入列表项 - 完成

现在我的代码（没有不必要的东西）看起来像这样：

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>");

            }
        }
    }

如您所见，我需要在很多地方复制我的代码，因为我不能在里面使用函数addReceiver()，例如onClickEvent: jquery list 函数。

感谢您的帮助！

Answer 1

您应该能够使用 es2015 速记方法定义让您的 options 对象中的函数访问组件的范围：

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

或者，如果我正确地假设 addReceiver() 方法会做同样的事情，你可以这样做：

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

希望这会有所帮助！

Answer 2

this里面options对象的方法将指向对象本身而不是vue实例。这就是原因

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

没用

而是在 options 对象之外定义一个 const vm = this 指向正确的 vue 实例并使用闭包

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