活动类在使用 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" >&nbsp; <ul>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a&nbsp; &nbsp; &nbsp; &nbsp; ref="tabItems"&nbsp; &nbsp; &nbsp; &nbsp; v-for="tabItem in tabs"&nbsp; &nbsp; &nbsp; &nbsp; :key="tabItem.idx"&nbsp; &nbsp; &nbsp; &nbsp; :class="{ 'b-active': tabItem.idx == selectedIndex }"&nbsp; &nbsp; &nbsp; &nbsp; @click="changeTab(idx)">&nbsp; &nbsp; &nbsp; &nbsp; <span v-if="icon"> {{ tabItem.icon }} </span>&nbsp; &nbsp; &nbsp; &nbsp; {{ tabItem.name }}&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </li>&nbsp; </ul></nav>

Answer 2

问题解决了，原来是数据类型问题，显然tabIndex是String，selectedIndex是Number。我变了：:class="{ 'b-active': idx === selectedIndex }"到：:class="{ 'b-active': idx == selectedIndex }"成功了！