fix: potential fix for rendering issues on lists with big amount of i…

…tems (#862jmqj2v)

app/back-end/builddata.json

@@ -1 +1 @@
-{"version":"0.42.0","build":16231}
+{"version":"0.42.0","build":16233}

app/src/components/Authors.vue

@@ -86,14 +86,15 @@
             <collection-row
                 v-for="(item, index) in items"
                 slot="content"
-                :key="index"
+                :key="'collection-row-' + index"
                 :cssClasses="item.id === 1 ? 'is-main-author' : ''">
                 <collection-cell>
                     <checkbox
                         v-if="item.id !== 1"
                         :value="item.id"
                         :checked="isChecked(item.id)"
-                        :onClick="toggleSelection" />
+                        :onClick="toggleSelection"
+                        :key="'collection-row-checkbox-' + index" />
 
                     <span
                         v-if="item.id === 1"

app/src/components/Backups.vue

@@ -81,13 +81,14 @@
             <collection-row
                 v-for="(item, index) in items"
                 slot="content"
-                :key="index">
+                :key="'collection-row-' + index">
                 <collection-cell>
                     <checkbox
                         :id="item.name"
                         :value="item.id"
                         :checked="isChecked(item.id)"
-                        :onClick="toggleSelection" />
+                        :onClick="toggleSelection"
+                        :key="'collection-row-checkbox-' + index" />
                 </collection-cell>
 
                 <collection-cell>

app/src/components/FileManager.vue

@@ -100,12 +100,13 @@
             <collection-row
                 v-for="(item, index) in filteredFiles"
                 slot="content"
-                :key="index">
+                :key="'collection-row-' + index">
                 <collection-cell>
                     <checkbox
                         :value="item.name"
                         :checked="isChecked(index)"
-                        :onClick="toggleSelection.bind(this, index)" />
+                        :onClick="toggleSelection.bind(this, index)"
+                        :key="'collection-row-checkbox-' + index" />
                 </collection-cell>
 
                 <collection-cell

app/src/components/LanguagesList.vue

@@ -24,7 +24,7 @@
         <language-item
             v-for="(language, index) in languages"
             :languageData="language"
-            :key="index" />
+            :key="'language-item-' + index" />
 
         <overlay
             v-if="languageIsOver"

app/src/components/PluginsList.vue

@@ -23,7 +23,7 @@
         <plugin-item
             v-for="(plugin, index) in plugins"
             :pluginData="plugin"
-            :key="index" />
+            :key="'plugin-item-' + index" />
 
         <overlay
             v-if="pluginIsOver"

app/src/components/Posts.vue

@@ -282,12 +282,13 @@
                 v-for="(item, index) in items"
                 slot="content"
                 :data-is-draft="item.isDraft"
-                :key="index">
+                :key="'collection-row-' + index">
                 <collection-cell>
                     <checkbox
                         :value="item.id"
                         :checked="isChecked(item.id)"
-                        :onClick="toggleSelection" />
+                        :onClick="toggleSelection"
+                        :key="'collection-row-checkbox-' + index" />
                 </collection-cell>
 
                 <collection-cell

app/src/components/SidebarMenu.vue

@@ -2,7 +2,7 @@
     <ul class="sidebar-menu">
         <li
             v-for="(item, index) in items"
-            :key="index"
+            :key="'sidebar-item-' + index"
             :class="{ 'sidebar-menu-item': true, 'is-active': item.icon === activeMenuItem }"
             @click="setActiveMenuItem(item.icon)">
             <router-link :to="item.url">

app/src/components/Tags.vue

@@ -104,12 +104,13 @@
             <collection-row
                 v-for="(item, index) in items"
                 slot="content"
-                :key="index">
+                :key="'collection-row-' + index">
                 <collection-cell>
                     <checkbox
                         :value="item.id"
                         :checked="isChecked(item.id)"
-                        :onClick="toggleSelection" />
+                        :onClick="toggleSelection"
+                        :key="'collection-row-checkbox-' + index" />
                 </collection-cell>
 
                 <collection-cell>

app/src/components/ThemesList.vue

@@ -24,7 +24,7 @@
         <theme-item
             v-for="(theme, index) in themes"
             :themeData="theme"
-            :key="index" />
+            :key="'theme-item-' + index" />
 
         <overlay
             v-if="themeIsOver"

app/src/components/WPImport.vue

@@ -85,7 +85,7 @@
                             :label="cpt"
                             :labelSeparated="false"
                             :noLabelSpace="true"
-                            :key="index"
+                            :key="'custom-post-type-item-' + index"
                             spacing="small">
                             <switcher
                                 slot="field"

app/src/components/basic-elements/Tabs.vue

@@ -9,7 +9,7 @@
             <ul>
                 <li
                     v-for="(item, index) in items"
-                    :key="index"
+                    :key="'tab-item-' + index"
                     :class="{ 'active': item === activeItem}"
                     @click="toggle(item)">
                     {{ item }}
@@ -20,7 +20,7 @@
         <div class="content">
             <div
                 v-for="(item, index) in items"
-                :key="index"
+                :key="'tab-item-content-' + index"
                 :class="{ 'tab': true, 'active': item === activeItem}">
                 <slot :name="'tab-' + index"></slot>
             </div>