首页 文章

使用带有Vue.js的uk-tab时，所有选项卡元素都处于活动状态

提问于
浏览 次
0

我在我的Vue-App中使用了getuikit的标签组件（https://getuikit.com/docs/tab）：

现在我看到每个选项卡都是活动的，如果我使用 v-for 迭代数组 .

<ul class=" uk-tab-left" uk-tab>
                    <li v-for="test in tests" id="test"><a href="#">{{ test }}</a></li>
 </ul>

在我的codepen示例中，您可以看到，类 uk-active 始终自动插入：

https://codepen.io/spqrinc/pen/Ydzbez

有可能改变这种行为吗？

vue.js vuejs2 getuikit

2 回答

  • 0
    <div id="app">
    <div>
        <div uk-grid>
            <div class="uk-width-1-4@m">
                <ul class=" uk-tab-left" data-uk-tab>
                    <template v-for="test in tests">
                        <li  :key="test" :id="test">
                            <a href="#">{{ test }}</a>
                        </li>
                    </template>
                </ul>
            </div>
        </div>
    </div>
</div>
    回复于
  • 0

    您可以在循环之前添加空li元素，以确保不会将活动类添加到其他类 .

    不要忘记在循环中添加一个键并绑定id .

    <div id="app">
    <div>
        <div uk-grid>
            <div class="uk-width-1-4@m">
                <ul class=" uk-tab-left" data-uk-tab>
                  <li></li>
                    <li v-for="test in tests" :key="test" :id="test">
                      <a href="#">{{ test }}</a>
                  </li>
                </ul>
            </div>
        </div>
    </div>
</div>
    回复于

相关问题