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



  • 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.

    0_1506556389913_upload-84f55884-e25d-4682-96f0-9092d943fb99

    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.
    


  • 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.


  • Admin

    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>
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.