Vue方法不将数据传递给对象数组

Question

所以我将尽可能以最好的方式解释这一点，因为我不明白是什么导致了这个问题，因为我觉得我已经遵循了所有的方向并且一直碰壁.

这是我的vue.js 应用程序：

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() {
            // Pass in additional <draggable> options inside the return for both lists.
            return {
                tag: 'div',
                group: 'o365apps',
                disabled: !this.editable,
                ghostClass: "ghost",
            };
        },
    },
});

在我的方法中，我有一个名为 get_array_of_post_objects 的方法，它返回一个我正在处理的对象数组。

所以在data 中，我在控制台记录我的手册default_apps 和我的default_apps1，这是方法。两个对象数组都包含post_title: "something"。

这是我得到的回报：

在我的映射中，当我定义 default_apps 时，我的 IDE 返回一些 name 的结果，但是当我将其切换到 default_apps1 时，它没有找到任何结果，如下所示：

我不知道还有什么可以看的 - 所有帮助将不胜感激！

如果需要，这里是 HTML 代码：

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

    <!-- Decorator: @ also known as v-on: -->
    <!-- Bind: : also known as v-bind: -->
    <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>

Answer 1

我不能 100% 确定您的应用应该做什么，因此请根据您的需要对其进行修改。

这里 selected_list 将首先为空。 然后我们调用你的异步方法，一旦完成， selected_list 就会被填充。

new Vue({
  name: 'o365-edit-modal-wrapper',
  el: '#o365-modal-edit-wrapper',
  data: function() {
    return {
      available_list: [],
      selected_list: [],
    }
  },
  created() {
    this.get_array_of_post_objects("add-your-slug")
  },
  methods: {
    get_array_of_post_objects(slug) {
      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) => {
          // You might want to modify posts for your needs
          this.selectedList = posts
        });
      });
    },
  },
});