Vue.js is corrupting data when setting an array

Question

So I'm getting json response from my controller, which looks simply like:

return Plan::find($request->id)->toJson();

And when I'm setting the received data into the vue array, some data get corrupted, dates are being changed randomly (for exmaple, start date and end date become the same, but the network response is correct).

I found out that the problem is with vue.js that I'm using to control data. for now, the vue method that gets data looks as follows:

updatePlan: function(id) {
    var json;
    $.getJSON('{{action("Controller@getJSON")}}',{id}).success(function(data) {
    {plan: id}).success(function(data) {
        json=data;
        animatedOpenModal('edit-button','editPlanModal');                       
    });
    setTimeout(function(){
        console.log(json);
        //vm.setPlan(json);
    },100);
},

and the commented method is

setPlan: function(json) {
    vm.$set('current_edit_plan', json);
    console.log(vm.current_edit_plan);                  
},

and for now console.log(json) shows correct data, but if I remove // - everything will fall apart: dates will become incorrect in both console logs and in array itself.

What is this and how could it be solved? I would highly appreciate any possible help!

Answer 1

Try this:

updatePlan: function(id) {
    var self = this;
    var json;
    $.getJSON('{{action("Controller@getJSON")}}',{id}).success(function(data) {
    {plan: id}).success(function(data) {
        json = data;
        animatedOpenModal('edit-button','editPlanModal');                       
    });
    setTimeout(function(){
        console.log(json);
        self.setPlan(json);
    },100);
},

Then for your setPlan method:

setPlan: function(json) {
    this.current_edit_plan = json;
    console.log(this.current_edit_plan);                  
},