Vue.js: mutually exclusive child component state

Question

I have a set of dynamic children:

Parent child1 child2 ... childn

I want to capture the onclick event on a child, and make a couple dom changes (expand a div, change icon), then ensure the other children have the opposite changes (ie, the div is collapsed and the icon is the closed icon).

What is the best vue-style way of accomplishing this?

I know how to emit events from the children up to the parent, and how to attach properties to the children, just not sure how to use those to accomplish the task.

Answer 1

The simplest way that I handle these is to use an activeIndex to track which one is open.

on the emit listeners, you update the the activeIndex.

then in your teomplate you can use <child isOpen="activeIndex===3"/>

you can get a bit more complicated and scalable/reusable, but this is probably enough for your needs. If you can post some code, I can update with more relevant example.