首页 文章

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

提问于
浏览 1494
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

有可能改变这种行为吗?

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>
    

相关问题