What is the most effective way to use v-show
for toggling elements based on their index? I have been able to toggle the elements, but when you click on the element that is already open, it does not close.
<div v-for="(btn, index) in dataArray">
<button @click="toggle(index)">{{ btn.name }}</button>
<p v-show="isOpenIndex === index"> {{ btn.desc }} </p>
</div>
I tried adding a falsey condition to close the currently open element when clicking on another button, but then it doesn't open the clicked element.
<div v-for="(btn, index) in dataArray">
<button @click="toggle(index)">{{ btn.name }}</button>
<p v-show="isOpenIndex === index" v-if="isOpen"> {{ btn.desc }} </p>
</div>