Using a method as data inside the app parent

Question

So I'm still learning Vue.js and I got my list working well and I have one question. I will explain what I'm trying to do below as best as possible and I wanted to see if someone could help me with my issue.

---

So here is the component that I have on the HTML side:

<favorites-edit-component
    v-for="(favorite, index) in favorites"
    v-bind:index="index"
    v-bind:name="favorite.name"
    v-bind:key="favorite.id"
    v-on:remove="favorites.splice(index, 1)"
></favorites-edit-component>

---

Here is the vue.js portion that I have:

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: [
            {
                id: 1,
                name: 'Horse',
                url: 'www.example.com',
            },
            {
                id: 2,
                name: 'Sheep',
                url: 'www.example2.com',
            },
            {
                id: 3,
                name: 'Octopus',
                url: 'www.example2.com',
            },
            {
                id: 4,
                name: 'Deer',
                url: 'www.example2.com',
            },
            {
                id: 5,
                name: 'Hamster',
                url: 'www.example2.com',
            },
        ],
        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 => {
                    console.log(posts.items);
                    return posts.items;
                });
            })
        }
    }
});

So as you can see, I have the data: { favorites: [{}] } called inside the vue app and I get this console.log:

Now I built a method called get_favorite_menu_item and this is the return posts.items output inside console.log:

---

Problem: I don't want to have a manual array of items, I want to be able to pull in the method output and structure that - How would I take a approach on pulling the items?

Could I call something like this:

favorites: this.get_favorite_menu_items?

Here is a JFiddle with all the items: https://jsfiddle.net/5opygkxw/

All help will be appreciated on how to pull in the data.

Answer 1

First I will init favorites to empty array. then on get_favorite_menu_items() after I will init data from post.item to favorites. on created() hooks i will call get_favorite_menu_items() to fetch the data when the view is created.

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 => {
                    console.log(posts.items);
                    // need map key also
                    this.favorites = posts.items;
                });
            })
        }
    },
    created () {
       // fetch the data when the view is created
       this.get_favorite_menu_items();
    },
});