CODEWITHSUNDEEP
javascriptalertvue.js
Winston
Winston

Reputation: 331

got property undefined when fetching data in ajax using vue.js

I have got a undefined when I alert the param fetching from ajax using vue.js, here is my code.

test.json return:

[
  {isActive: false,name: test}
]

js:

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 am beginner of vue.js, hope have a reply, thanks.

Upvotes: 1

Views: 592

Answers (1)

ABDEL-RHMAN
ABDEL-RHMAN

Reputation: 3014

If you are fetching this data from that test.json file, first it need to be like that because that's not validate json:

[
  {
    "isActive": false,
    "name": "test"
    }
]

and you need to use bind because this not referring to the Vue instance 

    fetchTestData: function () {
        $.get('test.json', function (data) {
            this.test_data = data;
            alert(this.test_data[0].isActive);
        }.bind(this));
    }

and accessing the data like that this.test_data[0].isActive because it's an array

Upvotes: 1

Related Questions