NUXT_FRONTEND/components/Admin/NestedList.vue

<template>
  <v-list class="py-0" dense>
    <div v-for="category in categories" :key="category.id">
      <template>
        <v-list-item @click="">
          <v-col cols="10">
            <div :style="indent">{{ category.title }}</div>
          </v-col>
          <v-col cols="2" class="text-right">
            <v-btn link tile color="success" @click="$emit('edit', category)">
              <v-icon center> mdi-pencil</v-icon>
            </v-btn>
            <v-btn
              tile
              color="error"
              @click="$emit('delete', category)"
              :disabled="isDisabled(category)"
            >
              <v-icon center> mdi-delete-outline </v-icon>
            </v-btn>
          </v-col>
        </v-list-item>

        <category-list
          v-if="category.child.length"
          @edit="$emit('edit', $event)"
          @delete="$emit('delete', $event)"
          :depth="depth + 1"
          :categories="category.child"
        ></category-list>
      </template>
    </div>
  </v-list>
</template>

<script>
export default {
  name: "category-list",
  props: ["categories", "depth"],
  computed: {
    indent() {
      return { paddingLeft: `${this.depth * 20}px` };
    },
  },
  methods: {
    isDisabled(category) {
      return Boolean(category.news_count) || Boolean(category.child.length);
    },
  },
};
</script>