javascript - Vue.js 2: Get data from AJAX method -
i'm new vue, , i'm attempting grab data via ajax in method.
i know method working.
here's 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 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 moment, containing template running, since method isn't getting executed, there's no data.
i've tried know trigger method, i've run out of ideas.
it seems not calling buildfolders
method @ all, can call created hook of vue.js following:
var buildfolderslist = new vue({ el: '#sub-folders', data: { folderslist: [] }, created () { this.buildfolders() }, methods: { buildfolders: function () { var self = $.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 can relook @ how using this, scope of this
change in $.ajax
method happened here, see explanation here.
Comments
Post a Comment