在 vue 可拖动的每次更改后获取数组 ID

Posted 2023-02-22

【中文标题】在 vue 可拖动的每次更改后获取数组 ID

【英文标题】：Grab array IDs after each change on vue draggable

【发布时间】：2021-05-22 04:00:35

【问题描述】：

所以我想看看是否有人熟悉这个，看看是否有人可以就我正在尝试做的事情给我一些指导：

这是我拥有的Vue.js 应用程序：

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

我有一个 list: 对象，它抓取我的两个列表数组 selected 和 available 并将它们呈现在前端，如下所示：

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

这是我的@change 回调的作用：

问题：

如何在每次更改时从数组中提取 list.selected ID，因此当有人添加项目或删除项目时 - 我可以看到每次拖动的 ID，但有没有办法获取所有数组中的 ID 一次？

【参考方案1】：

您可以在数组中使用 map 函数来一次获取数组中的所有 id

您可以查看https://www.w3schools.com/jsref/jsref_map.asp了解更多信息