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

Question

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.

Can you check what data logs. If its string, you might need to parse it to object using JSON.parse — Rajesh Dixit
– Rajesh Dixit, Commented Nov 10, 2016 at 8:21
Yup. If you are sending data as string, you will need to convert in to object — Rajesh Dixit
– Rajesh Dixit, Commented Nov 10, 2016 at 8:39

ABDEL-RHMAN · Accepted Answer · 2016-11-10 10:00:26Z

1

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

answered Nov 10, 2016 at 10:00

ABDEL-RHMAN

3,05419 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GiuServ Over a year ago

exactly the [0] because the array. or you can give this.test_data = data[0] and alert(this.test_data.isActive);

Winston Over a year ago

I have follow the above step, alert this.test_data display correct data, but alert this.test_data.isActive display undefined.

ABDEL-RHMAN Over a year ago

@Winston notice the [0] because it's an array, did you try that?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related