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方法中發生變化，就像這里發生的那樣，請參閱這里的解釋。