v-for 组件未在生产机器上呈现但在本地工作

Question

我正在尝试使用 vue 的 v-for 动态呈现 bootstrap 选项卡 (b-tabs)。在我的本地机器上工作得很好，但在投入生产时无法呈现。

我已经使用 vue chrome 调试器来确认我的所有后端数据都符合预期。没有错误记录到控制台。同事能够重现工作的本地版本和不正确的生产实例。

我还尝试添加 preferencesDialogTab 组件的手动副本。该手动组件工作正常，但 v-for 组件中的 none 正在渲染。事实上，在检查元素时，它们甚至不存在于 DOM 中。

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

我的代码查看一个巨大的 blob 并提取所有独特的类别。然后它为每个类别创建一个 bootstrap 选项卡，并在选项卡中显示与当前类别匹配的所有 objects。

再次，在我的本地机器上工作得很好，但在生产中，页面加载（所有其他 headers 等都是可见的）但创建了 none 个选项卡。好奇是什么导致了差异。

Answer 1

在Vue中使用v-for时，还需要为循环中的每个根element/component提供一个唯一的Vuekey，还有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>

v-for 组件未在生产机器上呈现但在本地工作

v-for components not rendering on production machine but works locally

javascript

twitter-bootstrap

vue.js

bootstrap-vue