How to manage a parameter for an individual DOM element from a Vue.js component?

Question

Vue.js

I'm trying to make a section element using Vue.js that will expand or collapse when the user clicks on an icon. I did state tracking using the isActive parameter, but I ran into the fact that for each such element I need to track the state separately, and my approach with a common component parameter is not suitable - if I click collapse / expand one, then all sections react.

What does it look like

A back with api for managing sections is tied up, records are taken from the database.

Component code

<template>
  <div class="container">
    <div class="sections">
      <div class="section" v-for="section in sections">
      <div class="d-flex p-3 bg-danger text-white">
      <span >
      {{section.title}}
        <span v-if="isActive!==true">
        <span class="section-drop" v-on:click="activate">
          <v-icon name="angle-down" scale="2"></v-icon>
        </span>
        </span >
        <span v-else="isActive==true">
        <span class="section-drop" v-on:click="deactivate">
          <v-icon name="angle-up" scale="2"></v-icon>
        </span>
        </span >
      </span>
    </div>
      </div>
  </div>
  </div>
</template>
<script>
    import api from '../api';
    export default {
        name: 'Sections',
        data() {
            return {
                newSection: '',
                sections: [],
            }
        },
     props: {
       isActive: Boolean
     },
        methods: {
            activate: function () {
                this.isActive = true;
                console.log(this.isActive);
            },
            deactivate: function () {
                this.isActive = false;
                console.log(this.isActive);
            },

            createSection: function () {
                let section = this.newSection;
                if(!section) {
                    return
                }
                api.createSection(section)
                this.sections.push({
                    title: section
                });
            },
            deleteSection: function (id) {
                api.deleteSection(id)
            }
        },
        mounted() {
            api.getSections().then(response => {
                this.$log.debug("Data loaded: ", response.data)
                this.sections = response.data
            }).catch(error => {
                this.$log.debug(error)
            })
        }
    }
</script>
<style>
 .section-drop {
   position: fixed;
   left: 80%;
 }
 .section-drop :hover {
   cursor: pointer;
 }
 .section {
   margin-top: 10px;
 }
 .sections {
  margin-top: 15%;
}
</style>

Please help - explain how you can do this, track the status of each section separately?

Answer 1

Make a separate component for these sections, with the isActive property - each instance will have its own. Or these isActive'ov you should have an array, the length of which is equal to the number of sections. Or add an isActive property to the sections elements - each.