Все здравия!
Делаю на VUE визуальное представление js структуры в виде древовидного объекта. Делаю это рекурсивно.
Код примерно такой:
template: `
<ul class="Container">
<template v-for="child,key in object">
<template v-if='typeof(child) ==="object"'>
<li v-if="check(key)" class="Node ExpandOpen">
<div class="Expand "></div>
<div class="Content">{{key}}</div>
<node :object="child"></node>
</li>
<li v-else class="Node ExpandClosed" v-on:click="treeEvent(key)">
<div class="Expand "></div>
<div class="Content">{{key}}</div>
</li>
</template>
<li v-else class="Node ExpandLeaf">
<div class="Expand"></div>
<div class="Content">{{key}}:{{child}}</div>
</li>
</template>
</ul>
`,
name: 'node',
props: ["object"],
data:()=>({ visual:{} }),
methods : {
check: function( index ){
if(this.visual[index] === undefined ) return false;
return this.visual[index];
},
treeEvent: function(key){
if(this.visual[index] === undefined ) this.visual[index] = true;
else this.visual[index] = !this.visual[index];
}
}
Все прекрасно отображается. и все уровни отрабатываются. Следующая задача - оживить это дело. т.е. нажимая мышкой чтобы уровни открывались и закрывались. Для решения этой задачи на каждом уровне рекурсии в компоненте был заведена структура - visual
события нажатия отрабатываются, но не происходит обновление картинки. Оно и понятно.........
может быть кто нибудь подскажет - стратегию. Как в таком случае нужно поступить?
Спасибо
