There will be several lists that I will put in the component and use on the pages
I used v-for to output the information, but for some reason I can't output the list, maybe I'm doing something wrongI'm still new to VUE and I often make silly mistakes. Can you please tell me what I'm doing wrong when creating a list?
What am I doing wrong?
<template><li class="nav-item" v-for="(item, i) in items" :key="i" :class="{show: item.show}"><div class="nav-title nav-title-caption" @click="openItem(i)">{{item.title}}</div><div class="nav-dropdown"><span class="nav-title"><a href="">{{ item.li }}</a></span></div></li></template><style lang="scss" scoped> .nav-item {}</style><script> export default { data() { return { items: [{'title': 'title','show': false,'list': [{ li: 'item' }, { li: 'item' }, ] }, {'title': 'title','show': false,'list': [{ li: 'item' }, { li: 'item' }, ] } ] } }, methods: { openItem(index) { this.items[index].show = !this.items[index].show }, }, }</script>