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

Posted 2023-02-22

【中文标题】如何将默认类添加到vue中的第一个孩子

【英文标题】：How to add default class to first child in 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”类。但默认情况下，我只想要第一个孩子。那么你有什么想法吗？

【参考方案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"