Как задать условие в компоненте слайдера?

Question

[ceeed]

Для начала у меня есть SELECT, который дает на выбор 2 поля ( ETH и BTC ).

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

У меня есть компонент слайдера из библиотеки https://nightcatsama.github.io/vue-slider-componen...

У этого компонента есть параметр :marks, который отвечает за отрисовку данных под слайдером. В данный момент компонент слайдера выглядит вот так:

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

:marks="markSlider" сейчас обращается к переменной markSlider которая лежит в data ( вот 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,
      
    };
  },

у меня есть метод, который после того как мы выбираем ту или иную валюту подгружает данные с бэка. В этом методе есть как раз логика для отрисовки слайдера. Вот метод

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)
      
    },

В этом методе у меня прописана логика для отрисовки :marks только для данных полученных из валюты BTC
Я хочу сделать условие в компоненте слайдера, что если валюта BTC, то отрабатывает код который есть, а если нет, то просто привязать другую переменную из data в marks, и тем самым написать логику для ETH минуя BTC.
Как мне сделать условие в компоненте слайдера, чтобы оно отрабатывало на выбор определенной валюты?

Answer 1

[0xD34F]

Сделать markSlider из обычного свойства вычисляемым:

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

      default: return null;
    }
  },
  ...