How to set condition in slider component?

Question

Vue.js

To start, I have a SELECT that gives 2 fields to choose from ( ETH and BTC ).

<vSelect
          :label="'Выберите базовый актив:'"
          :options="underlyingList"
          @change="getMaturity"
          v-model="selectedCoin"
        >
        </vSelect>

I have a slider component from the library https://nightcatsama.github.io/vue-slider-componen...

This component has a :marks parameter that is responsible for drawing data under the slider. At the moment the slider component looks like this:

<vue-slider 
            v-model="expectedMinPrice"
            :marks="markSlider"
            :interval="100"
            :min="minSlider"
            :max="maxSlider"
            :step="stepSlider"
            @change="changeMinPrice"
            :enable-cross="false"
          ></vue-slider>

:marks="markSlider" now refers to the variable markSlider which is in data (here is data)

data() {
    return {
      value: 0,
      
      futHedgeFlag_down: false,
      futHedgeFlag_top: false,
      subDirectionFlag: false,
      saveDirection: false,
      minSlider: 0,
      maxSlider: 150000,
      stepSlider: 100,
      msg: "waiting",
      underlyingList: ["BTC", "ETH"],
      directionOptions: ["Up", "Down"],
      maturityList: [],
      expectedMinPrice: 0,
      expectedMaxPrice: [0, 150000],

      defolt_expectedMinPrice: [0, 150000],
      defolt_expectedMaxPrice: [0, 150000],

      sliderLabelsBtc: [0, 2000, 3000],
      sliderLabelsEth: [0, 150, 400],

      tableData: null,

      underlyingChoice: [],
      selectedCoin: null,
      selectedDate: null,
      selectedDirection: null,

      coinAmount: 0,
      description: "Description from DATA",
      chartData: {},
      max_slippage: null,
      name: "null",
      title: "Chart title from DATA",
      sliderLabels: [],

      timerId: null,
      intervalTimerId: null,
      markSlider: null,
      
    };
  },

I have a method that, after we select one or another currency, loads data from the back. This method has just the logic for rendering the slider. Here is the method

async getMaturity(underlying) {
      this.maturityList = await this.getMaturity_actions(underlying);
      const result = await this.getStrikes_actions(this.selectedCoin); //BTC-ETH
      console.log(".main_value", result[this.selectedCoin].main_value);
      console.log("sub_value", result[this.selectedCoin].sub_value);
      this.minSlider = result[this.selectedCoin].min;
      this.maxSlider = result[this.selectedCoin].max;
      this.stepSlider = result[this.selectedCoin].step;
      this.expectedMinPrice = [...result[this.selectedCoin].main_value];
      this.defolt_expectedMinPrice = [...result[this.selectedCoin].main_value];
      this.expectedMaxPrice = [...result[this.selectedCoin].sub_value];
      this.defolt_expectedMaxPrice = [...result[this.selectedCoin].sub_value];
/*        this.setupSliderLabels();  */
      this.selectedDate = null;
      this.coinAmount = 0;
      this.chartData = null;
      this.max_slippage = null;
      this.tableData = null;
      this.selectedDirection = null;
      this.futHedgeFlag_top = false;
      this.futHedgeFlag_down = false;
      this.saveDirection = false;
      this.subDirectionFlag = false;
      this.markSlider = v => !(v % 25000)
      
    },

In this method, I have the logic for drawing :marks only for the data received from the BTC
currency . I want to make a condition in the slider component that if the currency is BTC, then it works out the code that exists, and if not, then just bind another variable from data to marks , and thereby write logic for ETH bypassing BTC.
How can I make a condition in the slider component so that it works on the selection of a specific currency?

Answer 1

Make markSlider from a normal property computed:

computed: {
  markSlider() {
    switch (this.selectedCoin) {
      case 'BTC': return что-то одно;
      case 'ETH': return что-то другое;

      default: return null;
    }
  },
  ...