Как мне сетить данные при смене таба на новую вкладку?

Question

У меня есть приложение, в нем находятся 2 вкладки, которые переключаются между собой с помощью табов.

<div
  class="tab-item"
  v-if="activeTab === 1 &&$store.state.calculator.selectedUnderlying &&$store.state.calculator.selectedMaturity &&$store.state.calculator.coinAmount">
  <v-recommended></v-recommended>
</div>
<div class="tab-item" v-if="activeTab === 3">
  <vCustomQa></vCustomQa>
</div>

После того как я переключаю на новую вкладку (3) я хочу чтобы у меня отрабатывал метод который сетит данные. Как мне это сделать? Вот тот метод который я хочу чтобы отрабатывал на вкладке которой я хочу. Нужно чтобы слайдер сразу сетил значение исходя из этого метода, но я не знаю как это сделать.

async FieldsCheck() {
  if (
    this.selectedCoin &&
    this.selectedDate &&
    this.coinAmount != 0 &&
    this.selectedDirection
  ) {
    this.setDirection();
  }
},

компонент (3)

Ожидаемые значения цены

    </vSelect>
  </div>
  <div class="slederCustomQa">
    <div class="mt-28">
      <vue-slider
        v-model="expectedMinPrice"
        :marks="markSliderCoin"
        :interval="100"
        :min="minSlider"
        :max="maxSlider"
        :step="stepSlider"
        @change="changeMinPrice"
        :enable-cross="false"
      ></vue-slider>
      <div class="slider-divides">
        <span v-for="item in divides" :key="item"></span>
      </div>
    </div>
    <div class="number flex justify-between">
      <span v-for="label in sliderLabels" :key="label">{{ label }}</span>
    </div>
  </div>

  <vCheckbox 
  class="header__checkbox__customQa"
  v-model="futHedgeFlag_top">
    Выбрать рекомендуемый диапазон
  </vCheckbox>

Answer 1

Можно в теге script использовать вычисляемое свойство computed, которое будет следить за изменением activeTab и возвращать номер активной вкладки, тем самым сам код template станет более читаемым и понятным,

        computed: getActiveTab() {
    if(activeTab === 1 
&&$store.state.calculator.selectedUnderlying
&&$store.state.calculator.selectedMaturity
&&$store.state.calculator.coinAmount)return 1 
    if(activeTab === 2) return 2 
    if(activeTab === 3) return 3 
    в if пишете все что вам нужно сделать;
    }

Дальше в директиве v-if нужно смотреть на возвращаемое значение например

<div class="tab-item" v-if="getActiveTab=== 3">
  <vCustomQa></vCustomQa>
</div>

БЛОГ НА HUSL

Как мне сетить данные при смене таба на новую вкладку?

Ответы (1 шт):