How to output sub-component data with Vuejs 2?

0

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>
    
asked by anonymous 28.12.2016 / 14:11

1 answer

0

I found a workaround using localStorage to store and control the marked / unselected fields and thus always only issue checked items to another vue instance.

Follow the code: link

    
30.12.2016 / 03:18