Fixed torrent details info table rendering errors after page is refreshed (#508)

src/components/TorrentDetail/Tabs/Info.vue

@@ -230,7 +230,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import { FullScreenModal } from '@/mixins'
 import qbit from '@/services/qbit'
 
@@ -238,7 +237,8 @@ export default {
   name: 'Info',
   mixins: [FullScreenModal],
   props: {
-    hash: String
+    hash: String,
+    torrent: Object
   },
   data() {
     return {
@@ -247,12 +247,6 @@ export default {
       comment: null
     }
   },
-  computed: {
-    ...mapGetters(['getTorrent']),
-    torrent() {
-      return this.getTorrent(this.hash)
-    }
-  },
   mounted() {
     this.getTorrentProperties()
     this.renderTorrentPieceStates()
@@ -306,7 +300,6 @@ export default {
           ctx.fillRect((data.length - rectWidth), 0, rectWidth, canvas.height)
         }
       }
-
     }
   }
 }
@@ -326,12 +319,16 @@ export default {
   }
 }
 
+:deep(.v-data-table tbody td.caption) {
+  width: 20%;
+}
+
 #pieceStates {
   display: block;
 
   canvas {
     height: 100%;
-    width: 95%;
+    width: 50%;
     border: 1px dotted;
   }
 }

src/components/TorrentDetail/Tabs/TorrentTagsAndCategories.vue

@@ -55,16 +55,14 @@ export default {
   name: 'TorrentTagsAndCategories',
   mixins: [FullScreenModal],
   props: {
-    hash: String
+    hash: String,
+    torrent: Object
   },
   data: () => ({
     categories: []
   }),
   computed: {
-    ...mapGetters(['getTorrent', 'getAvailableTags', 'getCategories']),
-    torrent() {
-      return this.getTorrent(this.hash)
-    },
+    ...mapGetters(['getAvailableTags', 'getCategories']),
     availableTags() {
       return this.getAvailableTags()
     },

src/views/TorrentDetail.vue

@@ -54,7 +54,11 @@
       <v-card-text class="pa-0">
         <v-tabs-items v-model="tab" touchless>
           <v-tab-item eager value="info">
-            <info :is-active="tab === 'info'" :hash="hash" />
+            <info
+              v-if="torrent"
+              :torrent="torrent"
+              :hash="hash"
+            />
           </v-tab-item>
           <v-tab-item eager value="trackers">
             <Trackers :is-active="tab === 'trackers'" :hash="hash" />
@@ -66,7 +70,12 @@
             <Content :is-active="tab === 'content'" :hash="hash" />
           </v-tab-item>
           <v-tab-item eager value="tagsAndCategories">
-            <TagsAndCategories :is-active="tab === 'tagsAndCategories'" :hash="hash" />
+            <TagsAndCategories
+              v-if="torrent"
+              :torrent="torrent"
+              :is-active="tab === 'tagsAndCategories'"
+              :hash="hash"
+            />
           </v-tab-item>
         </v-tabs-items>
       </v-card-text>