How can I get all checked items from a component in another instance having the following tree structure?
window.Event = new Vue();
Vue.component('tree', {
props: {
model: {
type: Array,
default: function () { return [] }
},
checkeds: {
type: Array,
default: function () { return [] }
}
},
methods: {
changeCheck: function() {
Event.$emit('treeChangeCheck', this.check);
}
},
data: function(){
return {
check: this.checkeds
};
},
template: '\
<ul v-if="model.length > 0">\
<li><b>Checkeds:</b> {{ check }}</li>\
<li v-for="item in model">\
<input type="checkbox" @change="changeCheck" v-model="check" :value="item.id">\
{{ item.name }}\
<tree :model="item.children" :checkeds="checkeds"></tree>\
</li>\
</ul>\
'
});
new Vue({
el: '#demo',
created: function(){
Event.$on('treeChangeCheck', this.updateValue);
},
methods: {
updateValue: function(value){
this.$set(this, 'inputCheckeds', value);
}
},
data: function() {
return {
inputCheckeds: [],
list: [
{
id: 1,
name: 'Parent a',
children: [
{
id: 2,
name: 'Children a.a'
},
{
id: 3,
name: 'Children a.b'
}
]
},
{
id: 4,
name: 'Parent b',
children: [
{
id: 5,
name: 'Children b.a'
},
{
id: 6,
name: 'Children b.b'
}
]
}
]
}
}
})
ul, li{
margin-top: 10px;
}
p{
margin-left: 20px
}
<script src="https://unpkg.com/vue/dist/vue.js"></script><divid="demo">
<p>
inputCheckeds:
{{ inputCheckeds }}
</p>
<tree :model="list" :checkeds="[1, 4, 2, 3]" @treeChangeInput="updateValue"></tree>
</div>