fix: warning about key not being primitive type (quasarframework#751)

* fix: warning about key not beeing primitive type

* Also fix key for QStepper

Author: pdanpdan

dev/components/global/action-sheet.vue

@@ -11,7 +11,7 @@
         <q-item
           link
           v-for="dialog in types"
-          :key="dialog"
+          :key="dialog.label"
           @click="dialog.handler()"
           v-ripple.mat
         >

dev/components/index.vue

@@ -13,7 +13,7 @@
         </h4>
         <router-link
           v-for="feature in category"
-          :key="feature"
+          :key="`${ feature.route }${ feature.title }`"
           tag="div"
           class="q-item q-item-link"
           :to="feature.route"

src/components/action-sheet/ActionSheet.vue

@@ -15,7 +15,7 @@
           <div v-if="gallery" class="q-action-sheet-gallery row wrap flex-center">
             <div
               v-for="button in actions"
-              :key="button"
+              :key="button.id || JSON.stringify(button)"
               class="cursor-pointer relative-position column inline flex-center"
               @click="close(button.handler)"
               @keydown.enter="close(button.handler)"
@@ -32,7 +32,7 @@
           <q-list link v-else class="no-border">
             <q-item
               v-for="button in actions"
-              :key="button"
+              :key="button.id || JSON.stringify(button)"
               @click="close(button.handler)"
               @keydown.enter="close(button.handler)"
               tabindex="0"
@@ -70,7 +70,7 @@
         <div v-if="gallery" class="q-action-sheet-gallery row wrap flex-center">
           <div
             v-for="button in actions"
-            :key="button"
+            :key="button.id || JSON.stringify(button)"
             class="cursor-pointer relative-position column inline flex-center"
             @click="close(button.handler)"
             @keydown.enter="close(button.handler)"
@@ -87,7 +87,7 @@
         <q-list link v-else class="no-border">
           <q-item
             v-for="button in actions"
-            :key="button"
+            :key="button.id || JSON.stringify(button)"
             @click="close(button.handler)"
             @keydown.enter="close(button.handler)"
             :class="button.classes"

src/components/alert/QAlert.vue

@@ -24,7 +24,7 @@
           >
             <span
               v-for="btn in actions"
-              :key="btn"
+              :key="btn.id || JSON.stringify(btn)"
               @click="dismiss(btn.handler)"
               v-html="btn.label"
               class="uppercase"

src/components/autocomplete/QAutocomplete.vue

@@ -10,7 +10,7 @@
     <div class="list no-border" :class="{separator: separator}" :style="computedWidth">
       <q-item-wrapper
         v-for="(result, index) in computedResults"
-        :key="result"
+        :key="result.id || JSON.stringify(result)"
         :cfg="result"
         link
         :class="{active: selectedIndex === index}"

src/components/dialog/Dialog.vue

@@ -83,7 +83,7 @@
     >
       <q-btn
         v-for="button in buttons"
-        :key="button"
+        :key="button.id || JSON.stringify(button)"
         @click="trigger(button.handler, button.preventClose)"
         :class="button.classes"
         :style="button.style"

src/components/input-frame/QInputFrame.vue

@@ -9,7 +9,7 @@
     <template v-if="before">
       <q-icon
         v-for="item in before"
-        :key="item"
+        :key="item.id || JSON.stringify(item)"
         class="q-if-control q-if-control-before"
         :class="{hidden: __additionalHidden(item, hasError, length)}"
         :name="item.icon"
@@ -46,7 +46,7 @@
     <template v-if="after">
       <q-icon
         v-for="item in after"
-        :key="item"
+        :key="item.id || JSON.stringify(item)"
         class="q-if-control"
         :class="{hidden: __additionalHidden(item, hasError, length)}"
         :name="item.icon"

src/components/select/QDialogSelect.vue

@@ -31,7 +31,7 @@
     >
       <q-chip
         v-for="{label, value} in selectedOptions"
-        :key="label"
+        :key="`${ label }-${ value.id || JSON.stringify(value) }`"
         small
         :closable="!disable"
         :color="color"

src/components/select/QSelect.vue

@@ -31,7 +31,7 @@
     >
       <q-chip
         v-for="{label, value} in selectedOptions"
-        :key="label"
+        :key="`${ label }-${ value.id || JSON.stringify(value) }`"
         small
         :closable="!disable"
         :color="color"
@@ -81,7 +81,7 @@
         <template v-if="multiple">
           <q-item-wrapper
             v-for="opt in visibleOptions"
-            :key="opt"
+            :key="JSON.stringify(opt)"
             :cfg="opt"
             slot-replace
             @click.capture="__toggle(opt.value)"
@@ -103,7 +103,7 @@
         <template v-else>
           <q-item-wrapper
             v-for="opt in visibleOptions"
-            :key="opt"
+            :key="JSON.stringify(opt)"
             :cfg="opt"
             slot-replace
             :active="value === opt.value"

src/components/stepper/QStepper.vue

@@ -10,7 +10,7 @@
     >
       <step-tab
         v-for="(step, index) in steps"
-        :key="step"
+        :key="step.name"
         :vm="step"
       ></step-tab>
     </div>