I have a query that I need some assistance with. I am trying to retrieve data but seem to be facing difficulties in passing the data to my method.
The code snippet below shows the component and vue.js app I am working with:
Vue.component('favorites-edit-component', {
template: `
<div class="column is-half">
<button class="button is-fullwidth is-danger is-outlined mb-0">
<span>{{ name }}</span>
<span class="icon is-small favorite-delete" v-on:click="$emit('remove')">
<i class="fas fa-times"></i>
</span>
</button>
</div>
`,
props: ['name'],
});
new Vue({
el: '#favorites-modal-edit',
data: {
new_favorite_input: '',
favorites: [],
next_favorite_id: 6,
},
methods: {
add_new_favorite: function() {
this.favorites.push({
id: this.next_favorite_id++,
name: this.new_favorite_input
})
this.new_favorite_input = ''
},
get_favorite_menu_items: function() {
wp.api.loadPromise.done(function () {
const menus = wp.api.collections.Posts.extend({
url: wpApiSettings.root + 'menus/v1/locations/favorites_launcher',
})
const Menus = new menus();
Menus.fetch().then(posts => {
const test = posts.items.map(item => {
const items = {};
items['id'] = item.ID;
items['name'] = item.post_title;
console.log(items);
});
});
})
}
},
created () {
// fetch the data when the view is created
console.log(this.get_favorite_menu_items());
this.get_favorite_menu_items();
},
});
I aim to extract the data from the method get_favorite_menu_items and pass it to favorites: [].
Currently, within the created () call, I am receiving an undefined result for this.get_favorite_menu_items();.
Upon logging items inside my method, I notice that the objects are duplicated, which is not desired. To resolve this, I want to achieve the following:
- Retrieve two objects from the method only.
- Create an array of these objects and then assign the array to
favorites: [].
When I log test, I see the return as:
[undefined, undefined], [undefined, undefined]Menus.fetch().then(posts => {
// this.favorites = posts.items;
const test = posts.items.map(item => {
const items = {};
items['id'] = item.ID;
items['name'] = item.post_title;
});
console.log(test);
});
Your help on this matter would be greatly appreciated!