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

我在我的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)

2 years ago

<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>

2 years ago

您可以在循环之前添加空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>