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方法中发生变化，就像这里发生的那样，请参阅这里的解释。