Push GET object to empty object inside data return

I have the following vue app:

new Vue({
    name: 'o365-edit-modal-wrapper',
    el: '#o365-modal-edit-wrapper',
    data: function() {
        return {
            list: {},
        }
    },
    created() {
        this.get_array_of_post_objects(this.list, 'applications');
    },
    methods: {
        get_array_of_post_objects(list, slug) {
            wp.api.loadPromise.done(function () {
                const Posts = wp.api.models.Post.extend({
                    url: wpApiSettings.root + 'fh/v1/menus/' + slug,
                });
                const all_posts = new Posts();
                all_posts.fetch().then(function(posts) {

                    console.log(posts.data);

                });
            });
        },
    },
});

console.log(posts.data) outputs the following items:
enter image description here

How would I assign that object to my empty list: {} so that in my template, I can pull it as this:

<button class="button" v-for="app in list.selected" :key="app.order">

All help will be appreciated! I keep getting an undefined item back each time I attempt to push the items.

3 thoughts on “Push GET object to empty object inside data return”

  1. Whenever I have to work with JS, I always prefer ES6 syntax.
    Let me rewrite your code for you and try if it’s working or not. I prefer to use arrow functions inside a function.

    new Vue({
      name: "o365-edit-modal-wrapper",
      el: "#o365-modal-edit-wrapper",
      data() {
        return {
          list: {},
        };
      },
      created() {
        this.get_array_of_post_objects("applications");
      },
      methods: {
        get_array_of_post_objects(slug) {
          wp.api.loadPromise.done(() => {
            const Posts = wp.api.models.Post.extend({
              url: wpApiSettings.root + "fh/v1/menus/" + slug,
            });
            const all_posts = new Posts();
            all_posts.fetch().then((posts) => {
              console.log(posts.data);
              this.list = posts.data;
            });
          });
        },
      },
    });
    
    Reply

Leave a Comment