Trying to troubleshoot this issue is proving to be quite challenging for me. Despite following all the guidelines, I seem to be stuck at a roadblock and cannot figure out what is causing the problem.
Let's take a look at my vue.js application:
new Vue({
name: 'o365-edit-modal-wrapper',
el: '#o365-modal-edit-wrapper',
data: function() {
const default_apps = [
{
'post_title': 'Excel',
}, {
'post_title': 'Word',
}, {
'post_title': 'SharePoint',
}];
console.log(default_apps);
const default_apps1 = this.get_array_of_post_objects('application_launcher');
console.log(default_apps1);
return {
available_list: [],
selected_list: default_apps.map(function(name, index) {
return {
name: name.post_title,
order: index + 1,
fixed: false
};
}),
}
},
methods: {
get_array_of_post_objects(slug) {
let items = [];
wp.api.loadPromise.done(function () {
const Posts = wp.api.models.Post.extend({
url: wpApiSettings.root + 'menus/v1/locations/' + slug,
});
const all_posts = new Posts();
all_posts.fetch().then((posts) => {
items.push(...posts.items);
});
});
return items;
},
},
computed: {
dragOptions() {
// Additional <draggable> options for both lists.
return {
tag: 'div',
group: 'o365apps',
disabled: !this.editable,
ghostClass: "ghost",
};
},
},
});
Among my methods, there is one called get_array_of_post_objects, which returns an array of objects.
As part of the data section, I am logging two arrays - default_apps manually and default_apps1 utilizing the method. Both arrays contain objects with
post_title: "something"The outcome I am observing is as follows: https://i.sstatic.net/9zAk8.png
When I use default_apps in my mapping, my IDE recognizes the result for name. However, when I switch to default_apps1, it fails to find any results as depicted in the following image:
I am unsure of where else to look for a solution - any assistance would be greatly appreciated!
If necessary, here is the accompanying HTML code:
<div class="column is-half-desktop is-full-mobile buttons">
<nav class="level is-mobile mb-0">
<div class="level-left">
<div class="level-item is-size-5 has-text-left">Selected</div>
</div>
<div class="level-right">
<div class="level-item" @click="orderList()"><i class="fas fa-sort-alpha-up is-clickable"></i></div>
</div>
</nav>
<hr class="mt-1 mb-3">
<draggable class="list-group"
v-model="selected_list"
v-bind="dragOptions"
:move="onMove"
@add="onAdd"
@remove="onRemove"
@start="isDragging=true"
@end="isDragging=false">
<button class="button is-fullwidth is-flex list-group-item o365_app_handle level is-mobile" v-for="(app, index) in selected_list" :key="app.order">
<div class="level-left">
<span class="icon" aria-hidden="true">
<img :src="`<?= Path::o365('${app.name}' . '.svg'); ?>'`" />
</span>
<span>{{app.name}}</span>
</div>
<div class="level-right is-hidden-desktop">
<span class="icon has-text-danger is-clickable" @click="remove(index)">
<i class="fas fa-times"></i>
</span>
</div>
</button>
</draggable>
</div>