perf: use unique keys in all v-for loops

Author: rayrutjes

src/components/Pagination.vue

@@ -10,7 +10,7 @@
         <slot name="previous">&lt;</slot>
       </a>
     </li>
-    <li v-for="(item, key) in pages" :key="key" :class="[bem('item'), page === item ? bem('item', 'active') : '']" >
+    <li v-for="item in pages" :key="item" :class="[bem('item'), page === item ? bem('item', 'active') : '']" >
       <a href="#" @click.prevent="goToPage(item)">
         <slot :value="item" :active="item === page">
           {{ item }}

src/components/Rating.vue

@@ -13,9 +13,9 @@
               :max="max"
               :count="facet.count"
         >
-          <template v-for="(n, key) in max">
-            <span v-if="n <= facet.value" :class="bem('star')" :key="key">&#9733;</span>
-            <span v-else :class="bem('star', 'empty')" :key="key">&#9734;</span>
+          <template v-for="n in max">
+            <span v-if="n <= facet.value" :class="bem('star')" :key="n">&#9733;</span>
+            <span v-else :class="bem('star', 'empty')" :key="n">&#9734;</span>
           </template>
           &nbsp;&amp; up
           <span :class="bem('count')">{{facet.count}}</span>

src/components/RefinementList.vue

@@ -3,7 +3,7 @@
 
     <slot name="header"></slot>
 
-    <div v-for="(facet, key) in facetValues" :key="key" :class="[bem('item'), facet.isRefined ? bem('item', 'active') : '']">
+    <div v-for="facet in facetValues" :key="facet.name" :class="[bem('item'), facet.isRefined ? bem('item', 'active') : '']">
       <label :class="bem('label')">
         <input type="checkbox"
                :class="bem('checkbox')"

src/components/Results.vue

@@ -3,7 +3,7 @@
 
     <slot name="header"></slot>
 
-    <slot v-for="(result, key) in results" :result="result" :key="key">
+    <slot v-for="result in results" :result="result" :key="result.objectID">
       Result 'objectID': {{ result.objectID }}
     </slot>
 

src/components/ResultsPerPageSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <select :class="bem()" v-model="resultsPerPage">
-    <template v-for="(option, key) in options">
-      <option :value="option" :key="key"><slot :option="option">{{ option }}</slot></option>
+    <template v-for="option in options">
+      <option :value="option" :key="option"><slot :option="option">{{ option }}</slot></option>
     </template>
   </select>
 </template>

src/components/SortBySelector.vue

@@ -1,7 +1,7 @@
 <template>
   <select :class="bem()" v-model="indexName">
     <slot v-for="index in indices" :indexName="index.name" :label="index.label">
-      <option :value="index.name">
+      <option :value="index.name" :key="index.name">
         {{ index.label }}
       </option>
     </slot>