所以我想看看是否有人熟悉这个，看看是否有人可以给我一些关于我正在尝试做的事情的指导：
所以这是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在数组中？