使用方法作为应用父级内部的数据

Question

所以我仍在学习 Vue.js，我的清单运作良好，我有一个问题。我将在下面尽可能详细地解释我正在尝试做的事情，我想看看是否有人可以帮助我解决我的问题。

所以这是我在 HTML 端的组件：

<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>

这是我拥有的 vue.js 部分：

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;
                });
            })
        }
    }
});

如您所见，我在 vue 应用程序中调用了 data: { favorites: [{}] }，我得到了这个 console.log：

现在我构建了一个名为 get_favorite_menu_item 的方法，这是 console.log 中的 return posts.items 输出：

问题：我不想有一个手动的项目数组，我希望能够提取方法输出和结构 - 我将如何采取提取项目的方法？

我可以这样调用吗:

favorites: this.get_favorite_menu_items?

这是一个包含所有项目的 JFiddle：https://jsfiddle.net/5opygkxw/

如能提供有关如何提取数据的帮助，我们将不胜感激。

Answer 1

首先我会将收藏夹初始化为空数组。然后在 get_favorite_menu_items() 之后我将数据从 post.item 初始化到收藏夹。在 created() 挂钩上，我将在创建视图时调用 get_favorite_menu_items() 来获取数据。

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();
    },
});

使用方法作为应用父级内部的数据

Using a method as data inside the app parent

vue.js

vue-component

vuex

vuejs2