Winston Winston - 16 days ago 9
ASP.NET (C#) Question

vue.js root instance error

I have a json:{"IsActive":false}
and I have a code below:

new Vue({
el: '#viewport',
data: {

test_data: []
},

mounted: function () {
this.fetchTestData();
},
methods: {
fetchTestData: function () {
$.get(test.json, function (data) {

this.test_data = data;
alert(this.test_data.isActive);
});

}
}
});


I can get the false in alert of isActive, but in the browser it shows me :


[Vue warn]: Error when rendering root instance:


Any idea why this is happening?

Answer

There seems to be two things problematic in your code:

  1. scope of this got changed inside $.get, due to which it is not assigning to the Vue instance variable.

  2. File Name test.json has to be in quotes.

You have to make following changes:

methods: {
fetchTestData: function () {
    var that = this
    $.get("test.json", function (data) {
        that.test_data = data;
        alert(this.test_data.isActive);
    });
}
Comments