How to open dynamically created elements?

Question

Vue.js

There is a code

<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>

and JavaScript

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

How to open subnav without being tied to a specific variable?

Answer 1

index for loops is better not to use, add a field with a unique id to the object and use it instead of index. And it's also worth everything that is possible to take out of the template
Save the id of the item this.activeItem = index
The code for the active class will look like this :class="{ active: activeItem === index }"
PS.
Can CSS hover or focus be used?