JSFiddle - React, Tailwind, and code Playground

by Pooya Parsa

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id='app'>
  <!-- Card container -->
  <b-card no-block>

    <!-- Tabs component -->
    <b-tabs ref="tabs" card>
      <!-- Render Tabs -->
      <b-tab :title="`Tab ${i}`" v-for="i in tabs" :key="i">
        Tab Contents {{i}}
        <b-btn size="sm" variant="danger" class="float-right" @click="()=>closeTab(i)">Close tab</b-btn>
      </b-tab>

      <!-- Newtab Button (Using tabs slot) -->
      <b-nav-item slot="tabs" @click="newTab" href="#">
        +
      </b-nav-item>
    </b-tabs>
  </b-card>

  <br> Tabs: {{tabs}} NextTab: {{tabCounter}}

</div>

JavaScript

window.onload = function() {
  new Vue({
    el: '#app',
    data: {
      tabs: [1],
      tabCounter: 4,
    },
    methods: {
      closeTab(x) {
          for (let i = 0; i < this.tabs.length; i++) {
            if (this.tabs[i] === x) this.tabs.splice(i, 1);
          }
          this.$refs.tabs.updateTabs();
        },
        newTab() {
          this.tabs.push(this.tabCounter++)
          this.$refs.tabs.updateTabs();
        }
    }
  })
}