Есть компонент, который выводит список, полученный от api. При монтировании компонента список отображается, но при получении дочерних элементов , они отображаются только после того, как происходит клик на соседний элемент.
Шаблон:
<li :class="{active: active}" class="list-item">
<span v-if="model.child" >+</span><span @click="activeSet">{{ model.name }}</span>
<ul v-if="model.child && model.child.length">
<item :model="item" :key="item.id" v-for="(item,index) in model.child"></item>
</ul>
</li>
Код компонента:
Vue.component('item',{
props: ['model'],
template : '#item-template',
data: function () {
return {
active: false,
}
},
methods: {
activeSet: function(){
var self = this;
window.Event.$emit('deactive');
this.active = true;
axios.get('api.php',{
params : {
folder : self.model.path
}
}).then(function(response){
if(response.data.folders && response.data.folders.length)
self.model.child = response.data.folders;
});
}
},
mounted: function(){
var self = this;
window.Event.$on('deactive',function(){
self.active = false;
});
}
} );
App:
var app = new Vue({
el: '#app',
data: {
treeData : []
},
mounted: function(){
var self = this;
axios.get('api.php',{
params : {
folder : '/'
}
}).then(function(response){
self.treeData = response.data.folders;
});
},
});
Как заставить vue отобразить дочерний элемент во время изменения списка?
