Все элементы табуляции активны при использовании uk-tab с Vue.js

Question

Я использую компонент вкладки getuikit (https://getuikit.com/docs/tab) в моем Vue-App:

Теперь я вижу, что каждая вкладка активна, если я использую v-for для перебора массива.

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

В моем примере с кодом вы можете видеть, что класс uk-active всегда вставляется автоматически:

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

Есть ли возможность изменить этоповедение?

Answer 1

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

Answer 2

Вы можете добавить пустой элемент li перед циклом, чтобы убедиться, что активный класс не будет добавлен к остальным.

Не забудьте добавить ключ в цикл и связать идентификатор.

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