Vue - добавить класс к родительскому LI из дочернего компонента в повторяющийся список?

Question

Как лучше всего добавить класс к родительскому li в повторяемом списке из <LiComponent>?

родительского компонента

<template>
  <ul>
    <li v-for="(item, i) in List" class="" :key="`li_${i}`"> // waiting for child to add active
      <ChildLiComponent :key="`child_${i}`" :index="i" @addActiveClass="handleActiveClass" />
    </li>
  </ul>
</template>
<script>
export default {
  methods: {
    handleActiveClass() {
      // not sure here...
    },
  },
};
</script>

дочернего компонента LI

<template>
  <button @click="setActive">
    Add class 'active' to my parent
  </button>
</template>
<script>
export default {
  props: ['props'],
  methods: {
    setActive() {
      this.$emit('addActiveClass', this.i);
    },
  },
};
</script>

Answer 1

Предполагая, что вам нужен только один активный класс за раз, в родительском компоненте добавьте свойство данных для отслеживания активного элемента

data: () => ({
  activeItem: null,
  List: [] // whatever
})

В своем ChildLiComponent вы можете создать событие, чтобы сигнализировать активация

setActive () {
  this.$emit('add-active-class') // note the event name casing
}

и обработайте это в родительском шаблоне с привязкой класса к <li>

<li v-for="(item, i) in List" :class="{ active: activeItem === item }" :key="`li_${i}`">
  <ChildLiComponent :key="`child_${i}`" @add-active-class="activeItem = item" />
</li>