主动 class 在使用 vue.js 的第一个负载上没有反应

Question

所以我正在构建一个选项卡组件并使用：class 像这样绑定活动的 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 在第一次 mount() 时使用 tabIndex 值设置，并根据之后选择的 'idx' 进行更新。 如果我们手动单击选项卡，我对 b-active class 没有问题，但它不会绑定在 mount() 中分配的 tabIndex 值。

这是我用来直接添加值“0”进行测试但仍然没有得到任何东西的脚本。

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

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

谁能帮我？ 因为它看起来很简单，我两天都想不通

Answer 1

在初始渲染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>

Answer 2

问题解决了，原来是数据类型问题，显然tabIndex是一个字符串，而selectedIndex是一个数字。 我变了：

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

至：

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

它奏效了！