时间戳

首页 > 解决方案 > boostrap-vue 在模态中使用选项卡时无法正常工作

vue.js - boostrap-vue 在模态中使用选项卡时无法正常工作

问题描述

如果您将 b-tabs 放在模态框内，第一次打开模态框时一切正常，但是如果您关闭模态框并重新打开它，则选项卡不起作用，它将卡在第一个选项卡，切换选项卡不会有任何影响，而是第一个选项卡的内容将保持可见。重新加载页面是让它再次工作的唯一方法。

访问https://jsfiddle.net/gh9y7zLs/2/重现问题

    <div id='app'>
<div>
    <b-button v-b-modal.modal1>
      Launch demo modal
    </b-button>

    <!-- Modal Component -->
    <b-modal
      id="modal1"
      title="BootstrapVue" >
      <b-tabs content-class="mt-3" v-model="tabIndex">
        <b-tab
          title="first"
          active
        >
          I'm the first fading tab

          <b-button v-b-modal.modal1 @click="next()">
            Next
          </b-button>
        </b-tab>
        <b-tab title="second">
          <p>
            I'm the second tab content
          </p>
        </b-tab>
        <b-tab
          title="disabled"
          disabled
        >
          <p>
            Disabled tab!
          </p>
        </b-tab>
      </b-tabs>
    </b-modal>

  </div>
</div>

有人有解决方案吗？

标签： vue.jsbootstrap-vue

解决方案

这应该在即将发布的最新版本中修复（v2.0.0-rc.23）

推荐阅读