When working with Vue, I am aware that I can update the value of a data property within a method using this.variable_name. However, I encountered an issue while attempting to do this from within a method with a nested sub-method (due to making an ajax request) where I received an error stating that it was undefined.
The code snippet I have is:
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.');
}
});
}
}
}
});
I attempted setting var self = this; within the $.get method and then trying to splice self.field_list, but in both cases, I received an error stating
Cannot read property splice of undefinedEDIT since I may have been unclear-- the field_list is being populated. If I were to do this.field_list.splice outside the ajax function, it works fine. The problem lies in accessing external scope from within the vue methods.