问题描述
我想看看我是否可以从社区获得一些指导，让我了解如何采用这种方法并正确呈现列表。
所以这就是我正在尝试做的：
- 有一个列表
- 通过拉动对象数组来拆分拖动列表。
这是我的 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)"`？所有帮助将不胜感激！
这是我目前得到的：
但它应该是三个对象名称：
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）