0

I'm trying to dynamically render bootstrap tabs (b-tabs) using vue's v-for. Works like a charm on my local machine, but fails to render on when pushed to production.

I've used the vue chrome debugger to confirm that all of my backend data is matching what is expected. no errors are logged to the console. Coworkers are able to reproduce both a working local version and an incorrect production instance.

I've also tried adding a manual copy of the preferencesDialogTab component. That manual component works fine, but none of the v-for components are rendering. In fact, they aren't even present in the DOM when inspecting elements.

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

My code looks at a giant blob and pulls out all the unique categories. It then creates a bootstrap tab for each category and displays all the objects in the tab that match the current category.

again, works like a charm on my local machine, but in production, the page loads (all other headers etc are visible) but none of the tabs are created. Curious what could be causing the discrepancy.

Luke
  • 13
  • 3

1 Answers1

1

When using v-for in Vue, you also need to provide a unique Vue key for each root element/component in the loop, also b-tab needs to be a direct child of b-tabs... you can't wrap them each in a <div>:

<b-tabs>
    <b-tab v-for="(cat, idx) in allcategories" :title="cat" :key="idx">
        <PreferenceDialogTab :preferencesString="cat"/>
    </b-tab>
</b-tabs>
Troy Morehouse
  • 5,320
  • 1
  • 27
  • 38
  • Thanks, Troy! This worked beautifully. I actually already had b-tabs, but left it out for simplicity (turns out, should've put more code in my example block, sorry!). I'm still a little unclear on when the index parameter needs to be used. The documentation calls it optional for general use, but does later state that if using v-for with components, the key is required. Their example, however, shows the v-for directly being used in the component block (), I guess it must apply for using them indirectly in the component as well. – Luke Oct 14 '19 at 15:00
  • answering my own question, b-tab is a component. duh! Since I was so concerned about the component I wrote, I forgot that b-tab is also a vue component from bootstrap. – Luke Oct 14 '19 at 17:14