我想看看我是否可以从社区获得一些指导，了解我如何能够采用这种方法并正确呈现列表。
所以这就是我正在尝试做的事情：
- 有一份清单
- 通过拉出对象数组来拆分拖动列表。
所以这是我的Vue.js应用程序：
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');
console.log(this.list);
},
methods: {
get_array_of_post_objects(list, slug) {
let apps_list = list;
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) {
apps_list.push(posts.data);
});
});
return apps_list;
},
onMove({ relatedContext, draggedContext }) {
const relatedElement = relatedContext.element;
const draggedElement = draggedContext.element;
return (
(!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
);
},
},
computed: {
dragOptions() {
return {
tag: 'div',
group: 'o365apps',
disabled: !this.movable,
ghostClass: "ghost",
};
},
},
});
- 在应用程序内部，我有一个
list: []空数组。 - 在我的方法中，我有一个 GET 方法，它检索一个对象，其中包含两个数组，其中两个数组被选中并且可用。
- 在
created()通话中，我将列表输出为console.log(this.list);，这是我得到的响应：
问题：
以前，我有两个列表，但它似乎根本不够高效，是否可以在对象内部的数组上使用 v-for？
假设我的一个可拖动组件如下所示：
<draggable class="list-group" v-model="list" v-bind="dragOptions" :move="onMove">
<button class="button is-fullwidth is-flex list-group-item o365_app_handle level is-mobile" v-for="app in list" :key="app.order">
<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>
是否有可能以某种方式定位v-for="app in list"为 'v-for="app in list.(available array)"`？所有帮助将不胜感激！
这是我目前得到的：
但它应该是三个对象名称：
