1

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.

Wayne Smallman
  • 1,690
  • 11
  • 34
  • 56
  • 1
    From where are you calling `buildFolders ` method? – Saurabh Apr 14 '17 at 11:07
  • U dont call method buildFolders. Use one of [hooks](https://vuejs-tips.github.io/cheatsheet/) to make request And it is recommended to use [axios for ajax](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4) – Kirill Matrosov Apr 14 '17 at 12:55

1 Answers1

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • 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 Apr 14 '17 at 11:56
  • 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. – Wayne Smallman Apr 14 '17 at 12:03
  • @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. – Saurabh Apr 14 '17 at 12:40
  • Without the data, it doesn't work. I changed the code to: `self.foldersList = data.result;` which now works. – Wayne Smallman Apr 14 '17 at 12:46