What is the best way for vue to handle multiple containers showing and hiding?

//html
<div v-for="(item, index) in data" :class="["container", {"show": firstSwitchArr[index]}]">

//js
data: {
     firstSwitchArr: [true, false, false, false, false],
     data: data
},
methods:{
   switchShow(index) {
          this.$set(this.firstSwitchArr, index, !this.firstSwitchArr[index])
    }
}

//csss
.container{display:none}
.container.show{display:block}

vue project has a page, there are many containers for displaying data, which can be shown and hidden and divided into primary list and secondary list. The containers for displaying data are traversed through data, and there can be as many as you want. The method I implemented above does not quite meet the requirements. Is there a better way to implement it?

Vue.js
May.05,2022

traverse the array into objects key for data value for state

ui show to vue to do, considering that you can often change using v-show, data format {..., show: true or false}, switch the value of show through events, the value of this attribute is used for v-show

it is recommended to use the following data format to control the display and hiding through open true or false 

[
    {
        label: 'A1',
        value: 'A1',
        open: true,
        children: [
            {
                label: 'A1-1',
                value: 'A1-1'
            }
        ]
    },
    {
        label: 'A2',
        value: 'A2',
        open: false
    }
]

Previous: How to write this code more like an encapsulated module, and how should I optimize it? for example, I want the method to be left as an instance object.

Next: May I ask how to make each li track move randomly?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b4129e-2c564.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b4129e-2c564.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?