Слоты Vue, вызывающие Infinate Loop?

Question

У меня есть довольно простой компонент, который я пишу 'MultiView.'На самом деле это просто контейнер для данных, который может иметь 2 представления.Просмотр карты и просмотр таблицы.Он просто обрабатывает значок текущего вида и позволяет развернуть или свернуть любой вид.Если я показываю это в представлении карты, он работает нормально.Если слот таблицы находится в пределах v-if, бесконечный цикл происходит, когда я переключаю его в представление таблицы.Если слот таблицы находится в v-show, бесконечный цикл происходит именно тогда, когда я обновляю страницу.Теперь это только тот случай, когда у меня используется более одного из этих компонентов 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>

И вот код для него:

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 как-то зовет другого?Возможно, проблема в слоте DataSet, поскольку я хочу передать весь набор данных, а не только отдельные записи, такие как «работающий» 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>

Я так близок кэта страница завершена.Создание этого компонента сэкономит нам время, и кажется полезным и последовательным.Но этот чертов бесконечный цикл!