1

Во Vue компоненте есть массив pages, каждый элемент которого представляет из себя хеш.

Список табов отображаю так:

<ul class="nav nav-tabs card-header-tabs" role="tablist">
    <li v-for="(page, index) in pages" class="nav-item">
        <a :class="{ 'nav-link': true, 'active': index == 0 }" data-toggle="tab" :href="'#page' + page.id" role="tab">Page #{{index + 1}}</a>
    </li>
</ul>

На этом этапе все работает.

Следующим шагом необходимо реализовать соответствующий каждому табу контент. Я это делаю так:

<div v-for="(page, index) in pages" :id="'page' + page.id" :class="{ 'nav-pane': true, 'active': index == 0 }" role="tabpanel">
    {{index + 1}}
</div>

И это работает неправильно.

Например, у меня 3 страницы, то есть три таба и три соответствующих контента. При нормальном раскладе я должен получить следующее:

  • Вкладка Page #1 имеет в контенте цифру 1
  • Вкладка Page #2 имеет в контенте цифру 2
  • Вкладка Page #3 имеет в контенте цифру 3

В результате же каждый таб имеет список всех index + 1. Притом каждая цифра на новой строке, так как она "упакована" в:

<div class="tab-pane" id="page533" role="tabpanel">2</div>

Вообще сгенерированный код выглядит так:

<div class="card">
    <div class="card-header">
        <ul role="tablist" class="nav nav-tabs card-header-tabs">
            <li class="nav-item"><a data-toggle="tab" href="#page532" role="tab" class="nav-link active">Page #1</a></li>
            <li class="nav-item"><a data-toggle="tab" href="#page533" role="tab" class="nav-link">Page #2</a></li>
            <li class="nav-item"><a data-toggle="tab" href="#page534" role="tab" class="nav-link">Page #3</a></li>
        </ul>
    </div>
    <div class="card-block">
        <div class="tab-content">
            <div id="page532" role="tabpanel" aria-expanded="false" class="nav-pane active">
                1
            </div>
            <div id="page533" role="tabpanel" aria-expanded="false" class="nav-pane">
                2
            </div>
            <div id="page534" role="tabpanel" aria-expanded="false" class="nav-pane">
                3
            </div>
        </div>
    </div>
</div>

При смене таба класс active у контента меняется.

Притом если заменить Vue цикл у контента на простой HTML код:

<div class="tab-pane active" id="page532" role="tabpanel">1</div>
<div class="tab-pane" id="page533" role="tabpanel">2</div>
<div class="tab-pane" id="page534" role="tabpanel">3</div>

То все будет работать.

Предполагаю, что моя реализация - асинхронна. И JS библиотека от Bootstrap 4 просто не видит список контента, которому судя по всему этой библиотеке нужно что-то "подцепить".

Как это исправить подскажите, пожалуйста?

1 ответ 1

1

Нужно было разделить class в этой строке:

<div v-for="(page, index) in pages" :id="'page' + page.id" :class="{ 'nav-pane': true, 'active': index == 0 }" role="tabpanel">

На:

class="tab-pane" :class="{ 'active': index == 0 }"

Не знаю почему так, но это помогло.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.