javascript - 使用 vue.js 在 ajax 中获取数据时属性未定义

Question

当我使用 vue.js 提醒从 ajax 获取参数时，出现了未定义的情况，这是我的代码。

test.json 返回:

[
  {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);
        });

    }
}
});

我是vue.js的初学者，希望得到答复，谢谢。

Answer 1

如果您从 test.json 文件中获取此数据，首先它需要像这样，因为这不是验证 json:

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

并且您需要使用bind，因为this没有引用Vue实例

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

并像 this.test_data[0].isActive 那样访问数据，因为它是一个数组