我正在尝试使用 vue 的 v-for 动态渲染 Bootstrap 选项卡(b-tabs)。在我的本地机器上工作起来就像一个魅力，但在投入生产时无法渲染。
我使用了 vue chrome 调试器来确认我的所有后端数据都符合预期。控制台没有记录任何错误。同事能够重现工作的本地版本和不正确的生产实例。
我还尝试添加偏好对话框选项卡组件的手动副本。该手动组件工作正常，但 v-for 组件均未渲染。事实上，在检查元素时它们甚至不存在于 DOM 中。
<div v-for="cat in allcategories">
<b-tab :title="cat">
<PreferenceDialogTab :preferencesString="cat"/>
</b-tab>
</div>
我的代码查看一个巨大的 Blob 并提取所有独特的类别。然后，它为每个类别创建一个 Bootstrap 选项卡，并在选项卡中显示与当前类别匹配的所有对象。
再次，在我的本地计算机上工作就像一个魅力，但在生产中，页面加载(所有其他标题等可见)，但没有创建任何选项卡。好奇是什么导致了这种差异。
最佳答案
当使用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>
关于javascript - v-for 组件不在生产机器上渲染，但在本地工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58331049/