Question

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

v-on：click =“addReceiver”（在按钮'添加'上） - 完成
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

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

Answer 2

您应该能够使用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,
    }
};

希望这有帮助！

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

2 个答案: