Question

我知道我可以使用this.variable_name在方法中更改vue数据值。但是，当我尝试在带有子方法的方法中执行此操作时（因为我正在发出ajax请求），我收到undefined错误。

我有类似

的东西

var myvue = new Vue({
    name: "MyVue",
    el: '#my-vue-id',
    data: {
        fields: field_list // this is set in another js method elsewhere
    },
    methods: {
        reject: function (index, objectid) {
            if (confirm("Are you sure?")) {
                $.get("/reject/" + objectid, function (data) {
                    if (data.success == true) {
                        $("#" + objectid).fadeOut(400, function() {
                            this.field_list.splice(index, 1);
                        });
                    } else {
                        alert('Failed to delete.');
                    }
                });
            }

        }
    }
});

我还尝试在var self = this;方法中设置$.get，然后尝试拼接self.field_list，但在这两种情况下我都收到错误Cannot read property splice of undefined

编辑，因为我可能不清楚 - field_list正在填充。如果我在ajax函数之外做this.field_list.splice，它可以正常工作。问题是如何使用vue方法访问外部作用域。

Answer 1

您需要在var self = this;方法之外（之前）$.get执行$.get方法，因为您有不同的范围，这就是问题的根源。然后在$.get方法中使用self.field_list.splice(index, 1);

Answer 2

回调函数在调用时不会将您的Vue实例作为其上下文（this）。使用箭头函数进行回调，或将this保存到变量并使用它。

从sub方法中操作vue.js数据参数

2 个答案: