Vue.js 2: Get data from AJAX method

Question

I'm new to Vue, and I'm attempting to grab the data via AJAX in a method.

I know the method is working.

Here's the Vue code:

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

Here's the 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>

At the moment, the containing template is running, but since the method isn't getting executed, there's no data.

I've tried everything I know to trigger the method, but I've run out of ideas.

U dont call method buildFolders. Use one of hooks to make request And it is recommended to use axios for ajax — Kirill Matrosov
– Kirill Matrosov, Commented Apr 14, 2017 at 12:55

tony19 · Accepted Answer · 2022-07-15 23:02:00Z

1

It seems you are not calling the buildFolders method at all, you can call it from the created hook of vue.js like following:

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

Also you can relook at how you are using this, as scope of this will change in $.ajax method as happened here, see the explanation here.

edited Jul 15, 2022 at 23:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 14, 2017 at 11:09

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Wayne Smallman Over a year ago

Hi @Saurabh, as I said, tried everything I know to trigger the method, but I've run out of ideas. What you're seeing is that last iteration.

Wayne Smallman Over a year ago

I see that it's returning an object, but I don't understand how to access it — I'm unable to find data in it.

Saurabh Over a year ago

@WayneSmallman You dont need to depend on the value returned in the method, You have to just get the method executed and assign the vue instance variable in the method.

Wayne Smallman Over a year ago

Without the data, it doesn't work. I changed the code to: self.foldersList = data.result; which now works.

Collectives™ on Stack Overflow

Vue.js 2: Get data from AJAX method

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related