Вопрос:

Vue.js 2: Получить данные из метода AJAX

javascript ajax vuejs2

1641 просмотра

1 ответ

690 Репутация автора

Я новичок в 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>

В данный момент содержащий шаблон работает, но поскольку метод не выполняется, данных нет.

Я перепробовал все, что знаю, чтобы вызвать метод, но у меня закончились идеи.

Автор: Wayne Smallman Источник Размещён: 14.04.2017 10:55

Ответы (1)


0 плюса

35240 Репутация автора

Кажется, вы вообще не вызываете 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));
                }
            });
        }
    }
});

Также вы можете взглянуть на то, как вы используете это, так как область действия метода thisизменится, $.ajaxкак это произошло здесь , см. Объяснение здесь .

Автор: Saurabh Размещён: 14.04.2017 11:09
Вопросы из категории :
32x32