Вывод иерархических данных

[junior17]

Здравствуйте, везде (возможно плохо искал) почему-то для вывода дерева пишут рекурсии, вложенные циклы и т.д на сервере. Просьба прокомментировать чем плох этот вариант?

SELECT id, title, parent_id FROM categories ORDER BY title ASC

<?php foreach($categories as $category):?>
  <div id = "id<?php echo $category['id'];?>" parent_id = "<?php echo $category['parent_id'];?>">
     <a href = "ссылка"><?php echo $category['title'];?></a>
  </div>
<?php endforeach;?>

App = new Vue({
    el:'#page',
        mounted: function(){
            /* Если на странице есть атрибут parent_id, строим дерево */
            var _nodes = document.querySelectorAll('*[parent_id]');
            if(_nodes.length > 0){
                for(i=0;i<_nodes.length;i++){
                    if((_nodes[i].attributes.parent_id.value != 0)){
                        var div = document.createElement('div');
                        document.body.appendChild(div);
                        div.appendChild(_nodes[i]);
                        document.getElementById('id'+_nodes[i].attributes.parent_id.value).appendChild(div);
                    }
                }
            }
        },
});

 

[fixxxer]

Потому что хотят вывести html на сервере без джаваскрипта.

А зачем писать на vue как на jquery, долбая DOM в цикле? Там же virtual dom вот это все?

 

[junior17]

А зачем писать на vue как на jquery, долбая DOM в цикле? Там же virtual dom вот это все?

Только начал изучать Vue, пока толком не разобрался. Мне стало интересно, нигде не встречал, чтобы дерево строили на js без перебирания на сервере.

 

[fixxxer]

Ну, то, что ты делаешь, это какая-то jquery-подобная ересь
Отдавай с сервера json, а в vue сделай компонент и рендери по человечески.