Question

如何使用VueJS打开第一个标签？我已经制作了两个组件，但我不知道如何自动打开第一个选项卡。这是我尝试过的，但它不起作用：

在我执行时安装console.log（this.tabs）只返回0但在我执行此操作之前.tabs = this。$ children

Tabs.vue

<template>
    <div>
        <div class="tabs-header">
            <ul>
                <li v-for="tab in tabs" :key="tab.id" :class="{'is-active' : tab.isActive}">
                    <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
                </li>
            </ul>
        </div>
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Tabs", 
        data: function(){
            return { tabs: null };
        },
        created: function() {
            this.tabs = this.$children;

            //this.tabs[0].isActive = true;
        },
        methods: {
            selectTab (selectedTab){
                this.tabs.forEach(tab => {
                   tab.isActive = (tab.href == selectedTab.href);
                });
            }
        }

    }
</script>

这是我的第二个组件$ children 的 Tab.vue

<template>
    <div v-show="isActive">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "Tabs", 
        props: {
            name: { require: true },
            selected: { default: false }
        }, 
        data() {
            return { isActive: false }
        },         
        computed: {
            href() {
                return '#' + this.name.toLowerCase().replace(/ /g,'-');
            }
        },
        mounted() {
            this.isActive = this.selected;
        },
        methods: {
            select(){
                this.isActive = true;
            }
        }
    }
</script>

此行不起作用：

 //this.tabs[0].isActive = true;

Answer 1

我从laracasts.com/series/learn-vue-2-step-by-step/episodes/11复制粘贴代码，默认情况下会打开第一个标签。

情况就是如此，因为在html中，您在第一个标签页上设置了:selected=true。

如果您想默认打开第二个标签页，请将:selected=true移至第二个标签页，如下所示：https://jsfiddle.net/ahp3zzte/1/

如果要动态更改默认选项卡，请从html中删除:selected=true并在js中调用selectTab方法。另请注意，要执行此操作，您需要使用mounted而不是created。检查另一个小提琴：https://jsfiddle.net/0402y2ew/

如何用vuejs打开第一个标签？

1 个答案: