Here is the Vue application I am working with:
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
return {
list: {},
}
},
created() {
this.retrievePostObjects(this.list, 'applications');
},
methods: {
retrievePostObjects(list, slug) {
wp.api.loadPromise.done(function () {
const Posts = wp.api.models.Post.extend({
url: wpApiSettings.root + 'fh/v1/menus/' + slug,
});
const allPosts = new Posts();
allPosts.fetch().then(function(posts) {
console.log(posts.data);
});
});
},
},
});
console.log(posts.data) displays the following items:
https://i.sstatic.net/StPRe.png
I am trying to figure out how to assign that object to my empty list: {} so I can use it in my template like this:
<button class="button" v-for="app in list.selected" :key="app.order">
Any assistance would be greatly appreciated! Whenever I try pushing the items, I end up getting an undefined result.