Mam dwa komponenty Vue.js printers-view-row.vue oraz printer-posnet-row.vue. Pomimo podobieństw inaczej wyświetlany jest w nich button wokół icony mdi-eye. Jak sprawić, aby w komponencie printer-posnet-row był on wyświetlany tak samo jak w  printers-view-row.

/// printers-view-row.vue

<template>
  <v-row align="center">
    <v-col>
      <v-row dense>
        <v-col cols="auto">
          <span :class="{ 'text-body-2': true, 'text--bold': true }" v-text="value.displayName"></span>
        </v-col>
        <v-col cols="auto">
          <span
            :class="{
              'text-body-2': true
            }">
            <v-icon small class="mr-1">mdi-map-marker</v-icon>
            {{ stateMappings.orgUnitName(value.orgUnitId) }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col cols="auto">
      <span v-if="value.status.serialNumber" class="text-body-2 primary--text text--darken-2">
        {{ value.status.serialNumber }}
      </span>
    </v-col>
    <v-col cols="auto">
      <div class="text-body-2" style="min-width: 100px" v-text="value.target.name"></div>
    </v-col>
    <v-col cols="auto">
      <tooltip-icon
        :icon="icon"
        :color="color"
        :tooltip="value.status.error"
        :show-tooltip="value.status.error" />
    </v-col>
    <v-col cols="auto">
      <v2-btn color="primary" small @click="select">
        <v-icon>mdi-eye</v-icon>
      </v2-btn>
    </v-col>
  </v-row>
</template>
<script lang="ts">
import type { PropType} from "@vue/composition-api";
import { computed, defineComponent, inject, ref } from "@vue/composition-api";
import AppState from "@/views/main-wrap/app-state";
import StateMappings from "@/views/main-wrap/state-mappings";
import type Printer from "@/views/commerce/printers/printer";
import V2Btn from "@/compatibility-layer/components/v2-btn.vue";
import TooltipIcon from "@/components/simple/tooltip-icon.vue";

const TerminalsView = defineComponent({
  components: {
    TooltipIcon,
    V2Btn
  },

  props: {
    value: {
      type: Object as PropType<Printer>,
      required: true
    }
  },

  setup(props, context) {
    const appState = inject(AppState.Key) as AppState;
    const stateMappings = ref(StateMappings.create(appState));

    const icon = computed(() => {
      if (props.value.status.isUnknown) return "mdi-map-marker-question-outline";
      if (props.value.status.isNoConnection) return "mdi-close-circle";
      if (props.value.status.error) return "mdi-alert";
      return "mdi-check";
    });

    const color = computed(() => {
      if (props.value.status.isUnknown) return "primary darken-2";
      if (props.value.status.isNoConnection) return "error";
      if (props.value.status.error) return "orange";
      return "success";
    });

    return {
      stateMappings,
      icon,
      color,
      select: () => context.emit("select")
    };
  }
});

export default TerminalsView;
</script>

/// printer-posnet-row.vue

<template>

  <v-row align="center">
    <v-col>
      <v-row dense>
        <v-col cols="auto">
          <span class="text-body-2 text--bold" v-text="value.displayName"></span>
        </v-col>
        <v-col cols="auto">
          <span :class="{ 'text-body-2': true }">
            <v-icon small class="mr-1">mdi-map-marker</v-icon>
            {{ stateMappings.orgUnitName(value.organizationUnitId) }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col cols="auto">
      <div class="text-body-2" style="min-width: 100px">{{ targetName }}</div>
    </v-col>
    <v-col cols="1" class="px-2">
      <span class="text-body-2"><strong>{{ value.name }}</strong></span>
      <div class="text-caption">
        IP: {{ value.ipAddress }}
      </div>
    </v-col>
    <v-col cols="auto">
      <tooltip-icon
        :icon="icon"
        :color="color"
        :tooltip="value.status.error"
        :show-tooltip="value.status.error" />
    </v-col>
    <v-col cols="auto">
      <span v-if="value.status.serialNumber" class="text-body-2 primary--text text--darken-2">
        {{ value.status.serialNumber }}
      </span>
    </v-col>
    <v-col cols="auto">
      <v2-btn color="primary" small @click="status">
        <v-icon>mdi-eye</v-icon>
      </v2-btn>
    </v-col>
    <v-col cols="auto" class="px-2">
      <edit-async-delete-buttons :readonly="readonly" :delete-action="onDelete" @select="select" />
    </v-col>
  </v-row>
</template>

<script lang="ts">
import type { PropType } from "@vue/composition-api";
import { computed, defineComponent, inject, ref } from "@vue/composition-api";
import axios from "@/lib/axios";
import AppState from "@/views/main-wrap/app-state";
import StateMappings from "@/views/main-wrap/state-mappings";
import SubmitButton from "@/components/action-buttons/submit-button.vue";
import TooltipIcon from "@/components/simple/tooltip-icon.vue";
import InlineIcon from "@/components/simple/inline-icon.vue";
import TextUtils from "@/lib/text-utils";
import type PrinterPosnet from "@/views/commerce/printers-posnet/printer-posnet";
import EditAsyncDeleteButtons from "@/components/action-buttons/edit-async-delete-buttons.vue";
import PrinterTarget from "./../printers/printer-target";

const PrinterPosnetRow = defineComponent({
  components: {
    EditAsyncDeleteButtons,
    InlineIcon,
    TooltipIcon,
    SubmitButton
  },
  props: {
    value: {
      type: Object as PropType<PrinterPosnet>,
      required: true
    },
    readonly: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  emits: ["update", "select", "status"],

  setup(props, context) {
    const appState = inject(AppState.Key) as AppState;
    const stateMappings = ref(StateMappings.create(appState));
    const targetName = ref(PrinterTarget.getById(props.value.targetId)?.name);

    const onDelete = async () => {
      await axios.delete(`/api/services/app/PrinterPosnet/${props.value.id}`);
      context.emit("update");
    };

    const icon = computed(() => {
      console.log(props.value.status);
      if (props.value.status.isUnknown) return "mdi-map-marker-question-outline";
      if (props.value.status.isNoConnection) return "mdi-close-circle";
      if (props.value.status.error) return "mdi-alert";
      return "mdi-check";
    });

    const color = computed(() => {
      if (props.value.status.isUnknown) return "primary darken-2";
      if (props.value.status.isNoConnection) return "error";
      if (props.value.status.error) return "orange";
      return "success";
    });

    return {
      stateMappings,
      icon,
      color,
      targetName,
      onDelete,
      trim: TextUtils.trim,
      select: () => context.emit("select"),
      status: () => context.emit("status")
    };
  }
});

export default PrinterPosnetRow;
</script>

/// generowany kod HTML wokół mdi w printers-view-row.vue

<div data-insp-path="C:/Users/adala/OneDrive/Dokumenty/Frontend/src/views/commerce/printers/printers-view-row.vue:34:5:v-col" class="col col-auto"><button type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light v-size--small primary" data-insp-path="C:/Users/adala/OneDrive/Dokumenty/Frontend/src/views/commerce/printers/printers-view-row.vue:35:7:v2-btn"><span class="v-btn__content"><i aria-hidden="true" data-insp-path="C:/Users/adala/OneDrive/Dokumenty/Frontend/src/views/commerce/printers/printers-view-row.vue:36:9:v-icon" class="v-icon notranslate mdi mdi-eye theme--light"></i></span></button></div>


/// generowany kod HTML wokół mdi w printer-posnet-view-row.vue

<div data-insp-path="C:/Users/adala/OneDrive/Dokumenty/Frontend/src/views/commerce/printers-posnet/printer-posnet-row.vue:37:3:v-col" class="col col-auto"><v2-btn data-insp-path="C:/Users/adala/OneDrive/Dokumenty/Frontend/src/views/commerce/printers-posnet/printer-posnet-row.vue:38:5:v2-btn" color="primary" small=""><i aria-hidden="true" data-insp-path="C:/Users/adala/OneDrive/Dokumenty/Frontend/src/views/commerce/printers-posnet/printer-posnet-row.vue:39:7:v-icon" class="v-icon notranslate mdi mdi-eye theme--light"></i></v2-btn></div>