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

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -