vue.js - 如何将默认类添加到vue中的第一个孩子

问题描述

我有一个标签组件：

<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.jsvuejs2vue-componentvue-propsvuejs-slots

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

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

vue.js - 如何将默认类添加到vue中的第一个孩子

问题描述

解决方案

推荐阅读