[Vuejs]-All tab elements are active when using uk-tab with Vue.js

by

0👍

You can add a empty li element before the loop to make sure the active class will not be added to the others.

Don’t forget to add a key to the loop and bind the 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>

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>

Leave a comment