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

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

Теперь я вижу, что каждая вкладка активна, если я использую 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
person SPQRInc    schedule 10.12.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете добавить пустой элемент 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>

person F_Mekk    schedule 10.12.2018