Как открывать динамично созданные элементы?

Question

[melishev]

Есть код

<ul>
                    <li v-for="(Item, Index) in Navigation" :key="Index">
                        <div>
                            <Nuxt-link :to="Item.Link">{{Item.Name}}</Nuxt-link>
                            <span @click="SubNavActive = !SubNavActive"></span>
                        </div>
                        <ul :class="{active: SubNavActive}">
                            <li v-for="(Item, Index) in Item.SubNav" :key="Index">
                                <Nuxt-link :to="Item.Link">{{Item.Name}}</Nuxt-link>
                            </li>
                        </ul>
                    </li>
                </ul>

и JavaScript

<script>
export default {
    data () {
        return {
            SubNavActive: false,
        }
    }
}
</script>

Как не привязываясь к определенной переменной открывать поднавигацию?

Comments

[Вадим]

hover, mouseover?

Answer 1

[Константин Величко]

index для циклов лучше не использовать, добавьте к обьекту поле с уникальным id и используйте его вместо index. А так же стоит все что возможно выносить из шаблона

Сохраняйте id пункта this.activeItem = index
Код для активного класса будет выглядеть так :class="{ active: activeItem === index }"

PS.
Можно использовать CSS hover или focus?