我有一个相当简单的组件，正在编写“ MultiView”。它实际上只是一个可以包含2个视图的数据的容器。卡视图和表格视图。它仅处理当前视图图标，并允许您扩展或折叠任一视图。如果我在即时贴视图中显示它，则可以正常运行。如果Table的插槽位于v-if内，则当我将其切换到Table视图时会发生无限循环。如果Table的插槽位于V形显示内，则刷新页面时会发生无限循环。现在只有在使用多个MultiView组件中的一种时，情况如此。
我们有不同类型的“卡片”，因此我不想为每个卡片创建不同的MultiView。
以下是该组件的html：
<div class="multi-view"
v-bind:class="{ 'h-100': isDraggable }">
<!-- Header -->
<div class="card-header p-0">
<div class="d-flex justify-content-between">
<h3>
{{ title }}
<span class="highlight ml-2">{{ values.length }}</span>
</h3>
<!-- Update Status -->
<transition name="fade">
<label class="text-success mt-3"
v-show="showStatusMessage">
{{ statusMessage }}
</label>
</transition>
<div class="mt-25">
<!-- View Swap -->
<span class="mt-25 mr-3"
v-if="allowViewSwap">
<template>
<i class="far fa-credit-card-front text-black-25 hand"
title="Click here to change to Card view"
v-on:click="changeView(false)"
v-if="showTable">
</i>
<i class="far fa-th-list text-black-25 hand"
title="Click here to change to Table view"
v-on:click="changeView(true)"
v-if="!showTable">
</i>
</template>
</span>
<!-- Expand and Collapse -->
<a href="#"
title="Click here to exapnd all Orders"
v-if="isCollapsable"
v-on:click.prevent="swapAll(true)">
<i class="far mr-2"
v-bind:class="{ 'fa-chevron-down': showTable, 'fa-chevron-double-down': !showTable, 'text-body': !expanded, 'text-black-50': expanded || !showTable }">
</i>
</a>
<a href="#"
title="Click here to collapse all Orders"
v-if="isCollapsable"
v-on:click.prevent="swapAll(false)">
<i class="far"
v-bind:class="{ 'fa-chevron-up': showTable, 'fa-chevron-double-up': !showTable, 'text-body': expanded, 'text-black-50': !expanded || !showTable }">
</i>
</a>
</div>
</div>
</div>
<!-- Items -->
<div class="card-body p-1 card-set"
v-bind:class="{ 'mt-2': !showTable }">
<!-- Card View -->
<div v-show="!showTable">
<template v-for="(i, x) in values">
<slot v-bind:item="i">
</slot>
</template>
</div>
<!-- Table View -->
<div v-show="showTable">
<template>
<slot name="TableView"
v-bind:dataSet="values">
</slot>
</template>
</div>
</div>
</div>
这是它的javascript：
import draggable from 'vuedraggable';
import BaseClass from '../Support/BaseClass';
export default {
extends: BaseClass,
name: "multi-view",
components: {
draggable
},
props: {
title: { type: String, required: true },
items: { type: Array, required: false, default() { return [] } },
isDraggable: { type: Boolean, required: false, default: false },
isCollapsable: { type: Boolean, required: false, default: false },
showStatusMessage: { type: Boolean, required: false, default: true },
statusMessage: { type: String, required: false, default: '' },
allowViewSwap: { type: Boolean, required: false, default: true },
asTable: { type: Boolean, required: false, default: false },
swapAllCallback: { type: Function, required: true, default: undefined },
},
data() {
return {
values: this.items,
showTable: this.asTable,
expanded: true,
}
},
methods: {
swapAll(expanding) {
this.expanded = expanding;
if (this.swapAllCallback !== undefined)
this.swapAllCallback(this.$vnode.data.ref, this.showTable ? 'table' : 'cards', expanding);
},
changeView(toTable) {
this.showTable = toTable;
},
}
};
下面显示了它的使用状态，我不认为这是问题所在。
仅供参考，我可以注释掉moveto组件，并且没有任何变化，这意味着它仍然会产生无限循环。我好像一个MV以某种方式打电话给另一个MV？也许是因为我想向下传递整个数据集而不是像“工作” CardView这样的单个记录，而是向下传递整个数据集的问题。
<multi-view ref="UnassignedOrders"
title="Ready to Read/Unassigned"
v-bind:is-collapsable="true"
v-bind:allow-view-swap="true"
v-bind:as-table="true"
v-bind:items="unassignedOrders"
v-bind:swap-all-callback="swapAll">
<p slot-scope="data">
<order-card role-type="general"
v-bind:ref="'unassignedOrderCard' + data.item.Id"
v-bind:key="data.item.Id"
v-bind:order="data.item"
v-bind:is-collapsable="true"
v-bind:can-view="true"
v-bind:can-claim="true"
v-bind:can-assign="true"
v-bind:menu-options="generateChoices(data.item, 'UnassignedOrders')">
</order-card>
</p>
<p slot="TableView" slot-scope="data">
<datatable ref="UnassignedOrdersDataTable"
table-class="table table-sm table-hover table-ccf"
v-bind:columns="OrderCardColumns"
v-bind:page-size="0"
v-bind:data-set="data.dataSet">
<template slot="PatientName"
slot-scope="data">
<a href="#">{{ data.record.PatientName | name }}</a>
</template>
<template slot="Site" slot-scope="data">
{{ data.record.Site }}
</template>
<template slot="assign"
slot-scope="data">
<moveto outer-class="dropleft"
button-class="btn-xs"
button-content="<i class='far fa-user-check mt-25'></i>"
title="Click here to Assign this test"
v-bind:ref="'unassignedOrders' + data.record.Id"
v-bind:menu-options="generateChoices(data.record, 'UnassignedOrders', true)"
v-bind:item-id="data.record.Id"
origin="UnassignedOrders">
</moveto>
</template>
</datatable>
</p>
</multi-view>
我非常接近此页面的完整内容。创建此组件将为我们节省时间，并且似乎有用且一致。但是，该死的无限循环！