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

我是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));
                }
            });
        }
    }
});

Vue.component（'子文件夹'{
道具：[“文件夹”]，
模板：“”
});
var buildFoldersList=新的Vue({
el:“#子文件夹”，
数据：{
foldersList：这个。foldersList
},
方法：{
buildFolders:函数（）{
$.ajax({
url:base_url+'api/文件夹/get_子文件夹/'+浏览器_文件夹\u id，
方法：“POST”，
数据：{
“文件夹\u id”：浏览器\u文件夹\u id
},
成功：功能（数据）{
控制台日志（“数据”）；
控制台日志（数据）；
this.foldersList=数据；
},
错误：函数（错误）{
警报（JSON.stringify（错误））；
}
});
}
}
});

以下是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>

目前，包含的模板正在运行，但由于没有执行该方法，因此没有数据

---

我已经尝试了所有我知道的方法来触发该方法，但是我已经没有主意了。

看起来你根本没有调用

buildFolders

方法，你可以从vue.js的钩子中调用它，如下所示：

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

---

此外，您还可以重新了解如何使用此方法，因为

此

的范围将在

$中发生变化。ajax

方法正如所发生的那样，请参见说明。

似乎您根本没有调用

buildFolders

方法，您可以从vue.js的钩子中调用它，如下所示：

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

---

此外，您还可以重新了解您是如何使用此方法的，因为

此

的范围将在

$中更改。ajax

方法如发生的情况，请参阅说明。

您从何处调用

buildFolders

方法？您不调用方法buildFolders。使用其中一种方法发出请求，建议使用从何处调用

buildFolders

method？不要调用methodbuildfolders。使用其中一个来发出请求，建议使用Hi@Saurabh，正如我所说的，尝试了我所知道的一切来触发该方法，但我已经没有想法了。您看到的是最后一次迭代。我看到它正在返回一个对象，但我不知道如何访问它-我无法在其中找到数据。@WayneSmallman您不需要依赖方法中返回的值，您只需执行方法并在方法中分配vue实例变量。没有数据，它不起作用。我将代码更改为：

self.foldersList=data.result现在可以工作了。正如我所说，Hi@Saurabh尝试了我所知道的一切来触发该方法，但我已经没有主意了。您看到的是最后一次迭代。我看到它正在返回一个对象，但我不知道如何访问它-我无法在其中找到数据。@WayneSmallman您不需要依赖方法中返回的值，您只需执行方法并在方法中分配vue实例变量。没有数据，它不起作用。我将代码更改为：
self.foldersList=data.result现在可以工作了。