0
계산 된 데이터를 사용하여 추가 함수로 트리를 만들려고합니다. 나는 vuejs 공식 홈페이지에서 tree-view 예제를 사용하고 생성 된 계산 된 함수와 결합했지만이를 구현하는 데는 아무런 운이 없었다. 나는 4 일 동안이 문제를 해결하려고 노력했지만 아직 운이 없으므로 여기서 도움을 청한다.vue.js - 원시 json에서 중첩 배열을 사용할 때 순환 구성 요소가 업데이트되지 않습니다.
목록 끝에있는 "+"를 클릭하면 addChild 함수에 대한 호출이 트리거되고 데이터가 성공적으로 추가됩니다. 데이터가 추가되지만 재귀 구성 요소는 반응이 없습니다.
https://jsfiddle.net/znedj1ao/9/
var data2 = [{
"id": 1,
"name":"games",
"parentid": null
},
{
"id": 2,
"name": "movies",
"parentid": null
},
{
\t "name": "iron-man",
"id": 3,
"parentid": 2
},
{
"id": 4,
"name": "iron-woman",
"parentid": 3
}
]
// define the item component
Vue.component('item', {
template: '#item-template',
props: {
model: Object
},
data: function() {
return {
open: false
}
},
computed: {
isFolder: function() {
return this.model.children &&
this.model.children.length
}
},
methods: {
toggle: function() {
if (this.isFolder) {
this.open = !this.open
}
},
changeType: function() {
if (!this.isFolder) {
Vue.set(this.model, 'children', [])
this.addChild()
this.open = true
}
},
addChild: function() {
this.model.children.push({
name: 'My Tres',
\t \t \t \t children: [
\t \t \t { name: 'hello' },
\t \t \t { name: 'wat' }
]
})
}
}
})
// boot up the demo
var demo = new Vue({
el: '#demo',
data: {
treeData2: data2
},
computed: {
nestedInformation: function() {
var a= this.nestInformation(data2);
return a;
}
},
methods:
{
nestInformation: function(arr, parent){
var out = []
for(var i in arr) {
if(arr[i].parentid == parent) {
var children = this.nestInformation(arr, arr[i].id)
if(children.length) {
arr[i].children = children
}
out.push(arr[i])
}
}
return out
}
}
})<!-- item template -->
<script type="text/x-template" id="item-template">
<li>
<div
:class="{bold: isFolder}"
@click="toggle"
@dblclick="changeType">
{{model.name}}
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
</div>
<ul v-show="open" v-if="isFolder">
<item
class="item"
v-for="model in model.children"
:model="model">
</item>
<li class="add" @click="addChild">+</li>
</ul>
</li>
</script>
<p>(You can double click on an item to turn it into a folder.)</p>
<!-- the demo root element -->
<ul id="demo">
<item
class="item"
:model="nestedInformation[1]">
</item>
</ul>
나는 Vue 전문가는 아니지만 밀어 넣기를 사용하여 배열에 요소를 추가한다고해서 추가 된 속성이 반응하지 않는 것으로 보입니다. 당신은'$ set' 또는'Vue.set()'을 시도 할 수 있습니다. 그러나 나는 정말로 확신하지 않는다. –
나는 이미 작동하지 않는 것을 시도했다. https : //jsfiddle.net/3p0j5sgy/1368/에서 확인할 수 있습니다. 유일한 차이점은 이미 부모 - 자식 구조에있는 데이터를 전달하고 있다는 것입니다. – Johji
내 문제는 내 데이터가 원시이며 전달하기 전에 먼저 트리 구조로 변환해야합니다. – Johji