34 подписчика
Как работать с деревьями во Vue.js?
Те, кто работал со структурой данных, как деревья, прекрасно понимают, что речь пойдет о рекурсиях.
В js есть возможность создавать функции рекурсии - это те функции, которые вызывают сами себя внутри этой же функции. Пример подсчета факториала числа 5
function factorial(n) {
if (n === 0) {
return 1;
} else {
return n * factorial(n - 1);
}
}
// Пример использования
console.log(factorial(5)); // Вывод: 120
Когда работаем с Vue.js, то мы рассматриваем компонентный подход. Компоненты во Vue.js, так же могут вызывать сами себя внутри. Рассмотрим пример, с компонентом <Tree />.
Во Vue.js рекомендуется наименовывать компоненты двумя словами. Это просто пример из воздуха. Так же обратите пожалуйста внимание на то, что в доке Vue.js рекомендуется все условия, вычисления, computed и прочее выводить в отдельные методы и переводить их к ref переменные.
<template>
<div class="tree">
<span @click="isOpen = !isOpen" v-if="node.additional && node.additional.length > 0 && !isOpen" class="cursor-pointer">+</span>
<span @click="isOpen = !isOpen" v-if="node.additional && node.additional.length > 0 && isOpen" class="cursor-pointer">-</span>
<NuxtLink :to="getNodeUrl(node)">{{ node.name }}</NuxtLink>
<Tree v-show="node.additional && node.additional.length > 0 && isOpen" v-for="children in node.additional" :node="children" class="children"/>
</div>
</template>
Пример выше показывает пример, где мы создаем дерево из нод, в которых есть имя и ссылки. Если нод нет, то мы не можем сделать вложенность. К классу tree и children так же применяются стили, для того чтобы сделать отступы.
Так можно делать например комментарии в своем блоге.
1 минута
23 августа 2024