Активный класс не реагирует на первую загрузку, используя vue. js

Question

Итак, я создаю компонент табуляции и использую: class для привязки активного класса следующим образом.

<nav class="tabs__header" >
  <ul>
    <li>
      <a
        ref="tabItems"
        v-for="(tabItem, idx) in tabs"
        :key="tabItem.idx"
        :class="{ 'b-active': idx === selectedIndex }"
        @click="changeTab(idx)">
        <span v-if="icon"> {{ tabIcon }} </span>
        {{ tabItem.name }}
      </a>
    </li>
  </ul>
</nav>

selectedIndex устанавливается со значением tabIndex при первом монтировании () и обновляется на основе «idx», выбранный впоследствии. У меня нет проблем с классом b-active, если мы щелкаем по вкладке вручную, но он не связывает значение tabIndex, назначенное в mount ().

Это сценарий, который я использую для непосредственного добавления значения '0' для тестирование и до сих пор ничего не получается.

  props: {
   tabIndex: {
     type: String,
     default: '0'
  },

  mounted() { this.selectedIndex = this.tabIndex }

кто-нибудь может мне помочь? потому что это кажется очень простым, и я не мог понять это в течение 2 дней

Answer 1

Проблема решена, и оказывается, что это проблема типа данных, по-видимому, tabIndex - это строка, а selectedIndex - это число. Я изменил:

:class="{ 'b-active': idx === selectedIndex }"

на:

:class="{ 'b-active': idx == selectedIndex }"

и все заработало!

Answer 2

При начальном рендеринге idx кажется неопределенным.

Замените это:

:key="tabItem.idx"

этим:

:key="idx"

Теперь это должно работать нормально.

В качестве альтернативы вы можете использовать v-for, например:

v-for="tabItem in tabs"

Теперь использование tabItem.idx работает так же хорошо, как и в других, например tabItem.name.

Итак, вот ваш обновленный код:

<nav class="tabs__header" >
  <ul>
    <li>
      <a
        ref="tabItems"
        v-for="tabItem in tabs"
        :key="tabItem.idx"
        :class="{ 'b-active': tabItem.idx == selectedIndex }"
        @click="changeTab(idx)">
        <span v-if="icon"> {{ tabItem.icon }} </span>
        {{ tabItem.name }}
      </a>
    </li>
  </ul>
</nav>