Vue method not passing data to array of objects

Question

So I'm going to be explaining this in the best way possible as I don't understand what might be causing this issue on my end as I feel like I've followed all of the directions and keep hitting a brick wall.

Here is my vue.js app:

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

Inside my methods, I have a method called get_array_of_post_objects which returns an array of objects that I'm pulling through.

So inside data, I'm console logging my manual default_apps and my default_apps1 which is the method. Both of the arrays of objects have post_title: "something" inside.

Here is the return that I'm getting:

Inside my mapping, when I define default_apps, my IDE returns some result for name but when I switch it over to default_apps1, it's not finding any results as shown below:

I don't know what else to look at - All help would be appreciated!

Here is the HTML code if that is needed:

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

Take a look at this one: stackoverflow.com/questions/49745497/… — Mellet
– Mellet, Commented Feb 17, 2021 at 16:21
And the reason you're just seeing the 'T' is that your editor can't infer the type of name. The only thing the editor can see from the get_array_of_post_objects is that it returns a array. What the array contains it does not know. It might still work tho. Are you getting some error when you run the application? — Mellet
– Mellet, Commented Feb 17, 2021 at 16:31
@Mellet, thanks for the input mellet, so inside the vue devtools, I'm basically not getting a response at all, it's just a bunch of undefined returns. — user12394904
– user12394904, Commented Feb 17, 2021 at 16:32
wp.api.loadPromise might be async by the look of it. Do you have some documentation for the loadPromise method? — Mellet
– Mellet, Commented Feb 17, 2021 at 16:33
It's the wordpress backbone.js API - So the response it: Client startup is asynchronous. If the api schema is localized, the client can start immediately; if not the client makes an ajax request to load the schema. The client exposes a load promise for provide a reliable wait to wait for client to be ready: developer.wordpress.org/rest-api/using-the-rest-api/… — user12394904
– user12394904, Commented Feb 17, 2021 at 16:35

Mellet · Accepted Answer · 2021-02-17 16:40:20Z

I'm not 100% sure what your app is supposed to do, so modify it for your needs.

Here the selected_list will be empty first. Then we call your method, which is asynchronous, and once it's done selected_list gets populated.

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

Collectives™ on Stack Overflow

Vue method not passing data to array of objects

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related