Push GET object to empty object inside data return

by

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