Vue.js 2：从 AJAX 方法获取数据

Question

我是 Vue 的新手，我正在尝试通过 AJAX 在方法中获取数据。

我知道这个方法有效。

这是 Vue 代码：

Vue.component('sub-folder', {
    props: ['folder'],
    template: '<a href="#">{{folder.title}}</a>'
});

var buildFoldersList = new Vue({
    el: '#sub-folders',
    data: {
        foldersList: this.foldersList
    },
    methods: {
        buildFolders: function () {
            $.ajax({
                url: base_url + 'api/folder/get_subfolders/' + browser_folder_id,
                method: 'POST',
                data: {
                    "folder_id": browser_folder_id
                },
                success: function (data) {
                    console.log("Data");
                    console.log(data);
                    this.foldersList = data;
                },
                error: function (error) {
                    alert(JSON.stringify(error));
                }
            });
        }
    }
});

这是 HTML：

<div class="list-group" id="sub-folders">
    <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
</div>

目前，包含模板正在运行，但由于方法没有被执行，所以没有数据。

我已经尝试了我所知道的一切来触发该方法，但我已经没有想法了。

Answer 1

您似乎根本没有调用buildFolders 方法，您可以从vue.js 的created 钩子中调用它，如下所示：

var buildFoldersList = new Vue({
    el: '#sub-folders',
    data: {
        foldersList: []
    },
    created () {
       this.buildFolders()
    },
    methods: {
        buildFolders: function () {   
            var self = this 
            $.ajax({
                url: base_url + 'api/folder/get_subfolders/' + browser_folder_id,
                method: 'POST',
                data: {
                    "folder_id": browser_folder_id
                },
                success: function (data) {
                    console.log("Data");
                    console.log(data);
                    self.foldersList = data;
                },
                error: function (error) {
                    alert(JSON.stringify(error));
                }
            });
        }
    }
});

您还可以重新查看您是如何使用它的，因为this 的范围将在$.ajax 方法中发生变化，就像here 发生的那样，请参阅here 的解释。