v-для компонентов, которые не отображаются на производственной машине, но работают локально

Question

Я пытаюсь динамически визуализировать вкладки начальной загрузки (b-tabs), используя vue для vue. Работает как шарм на моей локальной машине, но не отображается при отправке в производство.

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

Я также попытался добавить ручную копию компонента PreferencesDialogTab. Этот ручной компонент работает нормально, но ни один из компонентов v-for не выполняет рендеринг. На самом деле, они даже не присутствуют в DOM при проверке элементов.

<div v-for="cat in allcategories">
    <b-tab :title="cat">
        <PreferenceDialogTab :preferencesString="cat"/>
    </b-tab>
</div>

Мой код смотрит на гигантский шарик и вытаскивает все уникальные категории. Затем он создает вкладку начальной загрузки для каждой категории и отображает все объекты на вкладке, которые соответствуют текущей категории.

снова, работает как чудо на моем локальном компьютере, но в процессе работы страница загружается (все остальныезаголовки и т.д. видны) но ни одна из вкладок не создана. Любопытно, что может быть причиной расхождения.

Answer 1

При использовании v-for в Vue вам также нужно предоставить уникальное Vue key для каждого корневого элемента / компонента в цикле, также b-tab должен быть прямым потомком из b-tabs ... вы не можете обернуть их каждый в <div>:

<b-tabs>
    <b-tab v-for="(cat, idx) in allcategories" :title="cat" :key="idx">
        <PreferenceDialogTab :preferencesString="cat"/>
    </b-tab>
</b-tabs>