formatting generated q-tabs - also getting a explict keys warning

[dgk]

Having trouble getting this to format. In the examples all the q-tab’s are created (manually) together, then all the q-tab-panes. In this way the the tabs appear in a row above the panes.

I thought erroneously that the “slot” would put them all together regardless of their created order but that’s not true.
Further even if I comment out the q-tab-pane’s (see below) the tabs still appear in a column so it’s something to do with generated vs manually coded too.

How can I to fix this without doing a separate v-for the the tabs and panes? Using flex order maybe?

<q-tabs color="secondary" v-if="ready"  inverted two-lines  v-for="type in Object.keys(schema)">
    <q-tab :name="type"  :label="type"  slot="title" />
     <q-tab-pane :name="type">
       <q-list>
         <div class="row no-wrap" v-for="(item, index) in items[type]">
           <q-formc  class="col-12" :item="item" :schema="schema[type]" @changed="saved=false" :saved="saved" @save="saveChanges"></q-formc>
         </div>
       </q-list>
     </q-tab-pane>
</q-tabs>

even this doesn’t work

<q-tabs color="secondary" v-if="ready"  inverted >
  <div v-for="type in Object.keys(schema)">
    <q-tab :name="type"  :label="type"  slot="title" />
     <!-- <q-tab-pane :name="type">
       <q-list>
         <div class="" v-for="(item, index) in items[type]">
           <q-formc  class="" :item="item" :schema="schema[type]" @changed="saved=false" :saved="saved" @save="saveChanges"></q-formc>
         </div>
       </q-list>
     </q-tab-pane> -->

   </div>
</q-tabs>

looks like this.

further I am getting this warning, but if I wrap inside q-tabs with an extra div with the v-for no error (see above). This extra div seems unnecessary, the code functions even with the warning.

(Emitted value instead of an instance of Error) <q-tabs v-for="type in Object.keys(schema)">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

[dgk]

I have figured out the warning. One need only add a `:key=“type” property binding to q-tabs since type is a unique value in my case

@rstoenescu I’m still unable to to the the q-tabs to render in a row. Is this an issue with the component(s) (to be filed at github) or an issue with my usage.

[rstoenescu]

What you are essentially doing is creating multiple QTabs. Right way to go is:

<q-tabs color="secondary" v-if="ready"  inverted two-lines>
    <q-tab v-for="type in Object.keys(schema)" :name="type" :key="type"  :label="type"  slot="title" />
     <q-tab-pane v-for="type in Object.keys(schema)" :name="type" :key="`pane-${type}`">
       <q-list>
         <div class="row no-wrap" v-for="(item, index) in items[type]">
           <q-formc  class="col-12" :item="item" :schema="schema[type]" @changed="saved=false" :saved="saved" @save="saveChanges"></q-formc>
         </div>
       </q-list>
     </q-tab-pane>
</q-tabs>