Блог

У меня есть компонент вкладок:

 lt;templategt;  lt;div class="tabs"gt;  lt;div class="tabs__list"gt;  lt;div  class="tabs__tab"  :class="{'tabs__tab_active': i === active}"  @click="changeTab(i)"  v-for="(label, i) in Tabs.labels"  :key="i"  gt;{{label}}lt;/divgt;  lt;/divgt;  lt;div class="tabs__container" ref="container"gt;  lt;div class="tabs__wrapper" ref="wrapper"gt;  lt;slot /gt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/templategt; lt;scriptgt; 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)  } } lt;/scriptgt;  

И у него есть вкладка дочерних компонентов, и я делаю вызов API, чтобы получить продукты. У каждого продукта есть вариации, и у каждой вариации есть название. Вот как я показываю:

 lt;div class="tabs-content"gt;  lt;Tabs v-for="variation in product.attributes.variations"gt;  lt;Tab :label="variation.name" :active="false"gt;  lt;/Tabgt;  lt;/Tabsgt;  lt;/divgt;  

Но здесь проблема в том, что все компоненты вкладок имеют класс «вкладки__вкладка_активна». Но по умолчанию я хочу только первого ребенка. Так у тебя есть какие-нибудь идеи?

Вы уже вытаскиваете индекс из другого цикла for. Вы должны иметь возможность использовать это для добавления условного класса

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

Попробуйте это в своем tabs компоненте

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