アプリケーションのブートストラップvueタブを試しています。すべてのタブクリックを無効にしたかったのですが、ナビゲーションボタンを使用してタブ間を移動したかったのです。
ただし、タブインデックスをインクリメントしようとすると、自動的に再びゼロに設定されます。
タブクリックを無効にする方法はありますが、前のボタンと次のボタンをナビゲートします。
new Vue({
el: '#app',
data: {
tabIndex:0
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card no-body >
<b-tabs warning pills card vertical v-model="tabIndex" class="generictab" ref="wizard">
<b-tab title="Tab Contents 1">
<b-row>
<b-col sm="12">
<b-form-group>
<label for="name">Name</label>
<b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
</b-form-group>
</b-col>
</b-row>
</b-tab>
<b-tab title="Tab Contents 2" :disabled="!(tabIndex==2)">
Tab Contents 2
</b-tab>
<b-tab title="Tab Contents 3" :disabled="!(tabIndex==3)">
Tab Contents 3
</b-tab>
</b-tabs>
<div class="text-center">
<b-button-group class="mt-2">
<b-btn @click="tabIndex--">Previous</b-btn>
<b-btn @click="tabIndex++">Next</b-btn>
</b-button-group>
<br>
<span class="text-muted">Current Tab: {{tabIndex}}</span>
</div>
</b-card>
</div>
回答 1 件
関連記事
- ブートストラップ4レスポンシブテーブルヘッダーの配置の問題
- ブートストラップはヘッダーの中央にsvgを揃えます
- 表内Angular9のボタンでブートストラップチェックボックスを有効または無効にする方法は?
- vueブートストラップでb-modalのmodal-okスロットを無効にする方法は?
- ブートストラップポップアップモーダルオーバーラップページヘッダー
- ngxブートストラップアコーディオンヘッダー内のチェックボックスが正しく機能しない
- ブートストラップを使用してモーダルヘッダーのテキストの横にボタンを追加する方法
- vuejsとブートストラップですべての配列を表示
- ブートストラップのボタンクリック効果を無効にする
私の理解では、タブ名をクリックするのではなく、「次へ」ボタンと「戻る」ボタンをクリックしてナビゲートしたいと考えています。これが実際の例です。それが役に立てば幸い。