Grab array IDs after each change on vue draggable

Question

So I wanted to see if someone is familiar with this and to see if someone can give me some guidance on what I'm attempting to do:

So here is the Vue.js app that I have:

new Vue({
    name: 'o365-edit-modal-wrapper',
    el: '#o365-modal-edit-wrapper',
    data: function() {
        return {
            list: {},
        }
    },

    // Call the methods inside the created lifecycle triggers on initial website load.
    created() {
        this.getMenuObjects('applications');
    },
    methods: {
        getMenuObjects(slug) {
            var self = this;
            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 (obj) {
                        if (obj.status === 'success') {
                            self.list = obj.data;
                        } else {
                            // Display use response here
                        }
                    });
            });
        },
        changed(evt) {
          console.log(evt);
        },
        onMove({ relatedContext, draggedContext }) {
            const relatedElement = relatedContext.element;
            const draggedElement = draggedContext.element;
            return (
                (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
            );
        },
    },
    computed: {
        dragOptions() {
            // Pass in additional <draggable> options inside the return for both lists.
            return {
                tag: 'div',
                group: 'o365apps',
                disabled: !this.movable,
                ghostClass: "ghost",
            };
        },
    },
});

I have the single list: {} object, that grabs my two list arrays selected and available and renders them on the front-end as shown below:

<div id="o365-modal-edit-wrapper">
    <div class="columns is-reversed-mobile">
        <div class="column is-half-desktop is-full-mobile buttons">
            <div class="is-size-5 has-text-left">Available</div>
            <hr class="mt-1 mb-3">
            <draggable class="list-group"
                       v-model="list.available"
                       v-bind="dragOptions"
                       :move="onMove">
                <button class="button is-fullwidth is-flex list-group-item o365_app_handle level is-mobile" v-for="(app, index) in list.available" :key="app.id">
                    <div class="level-left">
                        <span class="icon" aria-hidden="true">
                            <img :src="app.icon_url" />
                        </span>
                        <span>{{app.name}}</span>
                    </div>
                    <div class="level-right is-hidden-desktop">
                        <span class="icon has-text-primary is-clickable" @click="mobileClickAdd(index)">
                          <i class="fas fa-check"></i>
                        </span>
                    </div>
                </button>
            </draggable>
        </div>
        <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">
            <draggable class="list-group"
                       v-model="list.selected"
                       v-bind="dragOptions"
                       :move="onMove"
                       @change="changed">
                <button class="button is-fullwidth is-flex list-group-item o365_app_handle level is-mobile" v-for="(app, index) in list.selected" :key="app.id">
                    <div class="level-left">
                            <span class="icon" aria-hidden="true">
                                <img :src="app.icon_url" />
                            </span>
                        <span>{{app.name}}</span>
                    </div>
                    <div class="level-right is-hidden-desktop">
                        <span class="icon has-text-danger is-clickable" @click="mobileClickRemove(index)">
                          <i class="fas fa-times"></i>
                        </span>
                    </div>
                </button>
            </draggable>
        </div>
    </div>
</div>

Here is what my @change callback does:

Problem:

How can I extract the list.selected IDs from the array upon each change, so when someone adds in a item or if someone removes an item - I can see the IDs per drag, but is there a way to grab all the IDs at once in the array?

Answer 1

You can use map function in an array to get all the id at once in the array

You can see https://www.w3schools.com/jsref/jsref_map.asp for more info