[Vuejs]-Use a function in a v-for loop

by

0👍

✅

You have a few options to do this. You can add additional property to each category to track if it is open or not, or you can have a separate variable to store IDs of open categories.

Here is example with a separate variable to store IDs of open categories:

const menu = [
  {
    label: "Category 1",
    key: "category_1",
    subcategories: [
      {
        label: "1 - Subcategory 1",
        key: "1_subcategory_1",
      },
      {
        label: "1 - Subcategory 2",
        key: "1_subcategory_2",
      },
    ],
  },
  {
    label: "Category 2",
    key: "category_2",
    subcategories: [
      {
        label: "2 - Subcategory 1",
        key: "2_subcategory_1",
      },
    ],
  },
];

const openCategories = ref([]);

const toggleSubcategories = (categoryId) => {
  if(openCategories.value.includes(categoryId)) {            
    openCategories.value.splice(openCategories.value.indexOf(categoryId), 1);
  } else {
    openCategories.value.push(categoryId);
  }
}

<template>
  <div v-for="category in menu" :key="category.key">
    <div @click="toggleSubcategories(category.key)">
      <span> {{ category.label }}</span>
    </div>
    <div v-if="openCategories.includes(category.key)">
      <div
        v-for="subcategory in category.subcategories"
        :key="subcategory.key"
      >
        {{ subcategory.label }}
      </div>
    </div>
  </div>
</template>

Leave a comment