accordion - code helper

xxxxxxxxxx
 
<template>
  <div class="m-5">
    <MDBAccordion v-model="activeItem" class="w-100">
      <MDBAccordionItem headerTitle="Accordion Item #1" collapseId="collapseOne">
        <div v-for="(acc, id) in subAccordion" :key="id">
          <MDBAccordion v-model="subAccordionActiveItem" class="w-100" flush>
            <MDBAccordionItem
              :headerTitle="acc.title"
              :collapseId="acc.collapseId"
            >
              {{ acc.content }}
            </MDBAccordionItem>
          </MDBAccordion>
        </div>
      </MDBAccordionItem>
      <MDBAccordionItem headerTitle="Accordion Item #2" collapseId="collapseTwo">
        content 2
      </MDBAccordionItem>
      <MDBAccordionItem
        headerTitle="Accordion Item #3"
        collapseId="collapseThree"
      >
        content 3
      </MDBAccordionItem>
    </MDBAccordion>
  </div>
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
</style>

xxxxxxxxxx
 
<script>
import { MDBAccordion, MDBAccordionItem } from "mdb-vue-ui-kit";
import { ref, onMounted } from "vue";
​
export default {
  components: {
    MDBAccordion,
    MDBAccordionItem,
  },
​
  setup() {
    const activeItem = ref("");
    const subAccordionActiveItem = ref("");
​
    const subAccordion = ref([
      {
        title: "Accordion Item #4",
        collapseId: "collapseFour",
        content:
          "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem non doloribus facere dolorum ad inventore officiis dicta! Minus, dicta? Possimus numquam labore repellat, quaerat quidem saepe optio eligendi natus nostrum.",
      },
      {
        title: "Accordion Item #5",
        collapseId: "collapseFive",
        content:
          "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem non doloribus facere dolorum ad inventore officiis dicta! Minus, dicta? Possimus numquam labore repellat, quaerat quidem saepe optio eligendi natus nostrum.",
      },
      {
        title: "Accordion Item #6",
        collapseId: "collapseSix",
        content:
          "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem non doloribus facere dolorum ad inventore officiis dicta! Minus, dicta? Possimus numquam labore repellat, quaerat quidem saepe optio eligendi natus nostrum.",
      },
    ]);
​
    onMounted(() => {
      activeItem.value = "collapseOne";
    });
​
    return {
      activeItem,
      subAccordionActiveItem,
      subAccordion,
    };
  },
};
</script>
​

Console errors: 0