Question

我正在使用vueJS和Bootstrap选项卡，但无法使其正常工作。我可以访问选项卡1，选项卡2，选项卡3，选项卡4，但是之后我就无法返回选项卡1。我也可以走1、3，但不能走1和2。我基本上只能走到右边

由于这些标签位于v-for循环中，因此我向每个标签添加了ID。我的错误/警告为零，每个ID都是唯一的。

<nav class="navbar navbar-expand-lg " style="width:100%;">
    <div class=" navbar-collapse">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0" :id="'myTab'+form.id_item" role="tablist" style="display: flex; width:100%">
            <li class="nav-item nav-evt-li">
                <a class="nav-link nav-evt-a active" :id="'infosGenform-tab'+form.id_item" data-toggle="tab" :href="'#infosGenform'+form.id_item" role="tab" aria-controls="infosGenform" aria-selected="true">infosGenform</a>
            </li>
            <li class="nav-item nav-evt-li">
                <a class="nav-link nav-evt-a " :id="'inscrform-tab'+form.id_item" data-toggle="tab" :href="'#inscrform'+form.id_item" role="tab" aria-controls="inscrform" aria-selected="true">inscrform</a>
            </li>
            <li class="nav-item nav-evt-li">
                <a class="nav-link nav-evt-a" :id="'machineform-tab'+form.id_item" data-toggle="tab" :href="'#machineform'+form.id_item" role="tab" aria-controls="machineform" aria-selected="true">machineform</a>
            </li>
            <li class="nav-item nav-evt-li">
                <a class="nav-link nav-evt-a " :id="'comform-tab'+form.id_item" data-toggle="tab" :href="'#comform'+form.id_item" role="tab" aria-controls="home" aria-selected="true">comform</a>
            </li>
        </ul>
    </div>
</nav>

<div class="tab-content" :id="'myTabContent'+form.id_item">
    <div class="tab-pane fade show active itra-light-grey-bgr" :id="'infosGenform'+form.id_item" role="tabpanel" aria-labelledby="infosGenform-tab">
        1
    </div>
    <div class="tab-pane fade show itra-light-grey-bgr" :id="'inscrform'+form.id_item" role="tabpanel" aria-labelledby="inscrform-tab">
        2
    </div>
    <div class="tab-pane fade show itra-light-grey-bgr" :id="'machineform'+form.id_item" role="tabpanel" aria-labelledby="machineform-tab">
        3
    </div>
    <div class="tab-pane fade show itra-light-grey-bgr" :id="'comform'+form.id_item" role="tabpanel" aria-labelledby="comform-tab">
        4
    </div>
</div>

您已经经历过什么吗？

非常感谢

Answer 1

我会避免使用jQuery而是使用vuejs来浏览标签页。这是我的方法。

在标签导航中添加此@click.prevent="showTab(1)"。 .prevent是为了防止默认操作转到另一页。在您的其他导航中执行相同的操作，即@click.prevent="showTab(n)"。

这意味着您将必须像下面一样添加新的vuejs方法showTab(value)。

showTab(value){
  this.tab = value
}

在标签页中，使用vuejs show v-show="tab == 1"在下面找到完整的代码。

<template>
    <div>
        <nav class="navbar navbar-expand-lg " style="width:100%;">
            <div class=" navbar-collapse">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0" :id="'myTab'+form.id_item" role="tablist" style="display: flex; width:100%">
                    <li class="nav-item nav-evt-li">
                        <a class="nav-link nav-evt-a active" :id="'infosGenform-tab'+form.id_item" @click.prevent="showTab(1)" role="tab" aria-controls="infosGenform"
                            aria-selected="true">infosGenform</a>
                    </li>
                    <li class="nav-item nav-evt-li">
                        <a class="nav-link nav-evt-a " :id="'inscrform-tab'+form.id_item" @click.prevent="showTab(2)" role="tab" aria-controls="inscrform"
                            aria-selected="true">inscrform</a>
                    </li>
                    <li class="nav-item nav-evt-li">
                        <a class="nav-link nav-evt-a" :id="'machineform-tab'+form.id_item" @click.prevent="showTab(3)" role="tab" aria-controls="machineform"
                            aria-selected="true">machineform</a>
                    </li>
                    <li class="nav-item nav-evt-li">
                        <a class="nav-link nav-evt-a " :id="'comform-tab'+form.id_item" @click.prevent="showTab(4)" role="tab" aria-controls="home"
                            aria-selected="true">comform</a>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="tab-content" :id="'myTabContent'+form.id_item">
            <div v-show="tab == 1" class="tab-pane fade show itra-light-grey-bgr" :id="'infosGenform'+form.id_item" role="tabpanel"
                aria-labelledby="infosGenform-tab">
                1
            </div>
            <div v-show="tab == 2" class="tab-pane fade show itra-light-grey-bgr" :id="'inscrform'+form.id_item" role="tabpanel"
                aria-labelledby="inscrform-tab">
                2
            </div>
            <div v-show="tab == 3" class="tab-pane fade show itra-light-grey-bgr" :id="'machineform'+form.id_item" role="tabpanel"
                aria-labelledby="machineform-tab">
                3
            </div>
            <div v-show="tab == 4" class="tab-pane fade show itra-light-grey-bgr" :id="'comform'+form.id_item" role="tabpanel"
                aria-labelledby="comform-tab">
                4
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tab: 1
        }
    },
    methods: {
        showTab(value){
            this.tab = value
        }
    }
}
</script>

我希望这个答案会有所帮助。

引导4个带有VuesJS的选项卡循环-无法返回第一个选项卡

1 个答案: