Extract ProfitSymbol to seperate component

src/components/ftbot/ProfitSymbol.vue

@@ -0,0 +1,24 @@
+<template>
+  <span>{{ isProfitable ? '&#x1F534;' : '&#x1F7E2;' }}</span>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Trade } from '@/types';
+
+//
+
+@Component({})
+export default class ProfitSymbol extends Vue {
+  @Prop({ required: true }) trade!: Trade;
+
+  get isProfitable() {
+    console.log(this.trade);
+    const res = (this.trade.close_profit ?? 1) < 0 || (this.trade.current_profit ?? 1) < 0;
+    console.log(res);
+    return res;
+  }
+}
+</script>
+
+<style scoped></style>

src/components/ftbot/TradeList.vue

@@ -24,7 +24,7 @@
           </b-button>
         </template>
         <template v-slot:cell(pair)="row">
-          <span class="mr-1" v-html="profitSymbol(row.item)"></span>
+          <ProfitSymbol :trade="row.item" />
           <span>
             {{ row.item.pair }}
           </span>
@@ -48,11 +48,18 @@ import { namespace } from 'vuex-class';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { formatPercent } from '@/shared/formatters';
 import { Trade } from '@/types';
+import ProfitSymbol from './ProfitSymbol.vue';
 
 const ftbot = namespace('ftbot');
 
-@Component({})
+@Component({
+  components: { ProfitSymbol },
+})
 export default class TradeList extends Vue {
+  $refs!: {
+    tradesTable: HTMLFormElement;
+  };
+
   @Prop({ required: true })
   trades!: Array<Trade>;
 
@@ -103,11 +110,6 @@ export default class TradeList extends Vue {
     ...(this.activeTrades ? [{ key: 'actions' }] : []),
   ];
 
-  profitSymbol(item) {
-    // Red arrow / green circle
-    return item.close_profit < 0 || item.current_profit < 0 ? `&#x1F534;` : `&#x1F7E2;`;
-  }
-
   forcesellHandler(item) {
     this.$bvModal
       .msgBoxConfirm(`Really forcesell trade ${item.trade_id} (Pair ${item.pair})?`)

src/types/types.ts

@@ -90,6 +90,7 @@ export interface Trade {
   fee_close_currency?: string;
 
   current_rate?: number;
+  current_profit?: number;
   sell_reason?: string;
   min_rate?: number;
   max_rate?: number;