如何将默认类添加到vue中的第一个孩子答案

【问题标题】：How to add default class to first child in vue如何将默认类添加到vue中的第一个孩子
【发布时间】：2021-12-22 06:21:52
【问题描述】：

我有一个选项卡组件：

<template>
    <div class="tabs">
        <div class="tabs__list">
            <div
                class="tabs__tab"
                :class="{'tabs__tab_active': i === active}"
                @click="changeTab(i)"
                v-for="(label, i) in Tabs.labels"
                :key="i"
            >{{label}}</div>
        </div>
        <div class="tabs__container" ref="container">
            <div class="tabs__wrapper" ref="wrapper">
                <slot />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    computed: {
        active() {
            return this.Tabs.active
        }
    },
    data() {
        return {
            Tabs: {
                labels: [],
                items: [],
                active: 0
            }
        }
    },
    methods: {
        setHeight() {
            const el = this.Tabs.items[this.active]
            const height = el.scrollHeight
            this.$refs.container.style.height = height + 'px'
        },
        scrollWrapper() {
            const {wrapper} = this.$refs
            const offset = 100 * this.active
            wrapper.style.transform = `translate3d(-${offset}%, 0, 0)`
        },
        changeTab(i) {
            this.Tabs.active = i
            this.setHeight()
            this.scrollWrapper()
        }
    },
    provide() {
        return {
            Tabs: this.Tabs
        }
    },
    mounted() {
        this.setHeight()
        this.scrollWrapper()
        this.debounce = _.debounce(this.setHeight, 50)
        window.addEventListener('resize', this.debounce)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.debounce)
    }
}
</script>

它有一个子组件选项卡，我正在调用 API 来获取产品。每个产品都有变体，每个变体都有名称。这就是我的显示方式：

<div class="tabs-content">
                            <Tabs v-for="variation in product.attributes.variations">
                                <Tab :label="variation.name" :active="false">
                                </Tab>
                            </Tabs>
                        </div>

但这里的问题是所有 Tab 组件都有一个“tabs__tab_active”类。但默认情况下，我只想要第一个孩子。那么你有什么想法吗？

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-props vuejs-slots

【解决方案1】：

您已经从另一个 for 循环中拉出索引。您应该可以使用它来添加条件类

<Tabs v-for="(variation, index) in product.attributes.variations">
  <Tab :label="variation.name" :active="false" :class="{'tabs__tab_active': index === 0}">
  </Tab>
</Tabs>

【讨论】：

感谢您的回答，但没有任何改变

【解决方案2】：

在你的 tabs 组件中试试这个

<div class="tabs__list">
            <div
                v-for="(label, i) in Tabs.labels"
                :key="i"
                :class="['tabs__tab', {'tabs__tab_active': i === 0}]" // change added
                @click="changeTab(i)"
            >{{label}}</div>
</div>

【讨论】：

我编辑了我的问题。我收到了图片中的错误。
这条线this.debounce = _.debounce(this.setHeight, 50) insidemount 给出_ is not defined 错误
在我的回答中也是:key="i" 而不是:key="I"