活动类在使用 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 在第一次 Mounted() 时设置为 tabIndex 值，并根据之后选择的 'idx' 进行更新。如果我们手动单击选项卡，我对 b-active 类没有问题，但它不会绑定在 Mounted() 中分配的 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是String，selectedIndex是Number。我变了：

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

到：

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

成功了！