[Vuejs]-Generate dynamic data field using child component

by

0👍

Just pass the product array to child component and filter the category by checkbox. pls try this

template

<!-- child -->
<script type="text/x-template" id="grid-template">
<div>
  <h2>
  category list:
  </h2>
 <ul>
     <li v-for="category in categories">
   <label>{{category.abc}}</label>
   <input type="checkbox" :value="category" v-model="selectedCategory" @change="emitback(selectedCategory)"/>
   </li>
 </ul>
 </div>
</script>

<!-- parent  -->
<div id="demo">
  <h2>
  selected category:
  </h2>
  <ul>
    <li v-for="category in selectedCategory">
      {{category.abc}}
    </li>
  </ul>
  <datafieldcheckbox :categories="product" @call="callfilteredproducts"></datafieldcheckbox>
</div>

script

Vue.component('datafieldcheckbox', {
  template: '#grid-template',
  props: {
    categories: Array,
  },
  created(){
    console.log(this.categories);
  },
  data: function () {
    return {
      selectedCategory:[]
    }
  },
  methods: {
        emitback(selectedVal){
            this.$emit('call',selectedVal);
    }
  }
})

// bootstrap the demo
var demo = new Vue({
  el: '#demo',
  data: {
    selectedCategory:[],
    product:[
              {
                "id": "1",
                "name": "Product1",
                "abc": "EEE",
                "skill": "Easy",
                "color": "blue",
                "price": 100.00
              },
              {
                "id": 2,
                "name": "Product2",
                "abc": "EEE",
                "skill": "Intermediate",
                "color": "red",
                "price": 120.00
              },
              {
                "id": 3,
                "name": "Product3",
                "abc": "Office",
                "skill": "Intermediate",
                "color": "green",
                "price": 190.00
              }
         ]
  },
  methods:{
    callfilteredproducts(event){
    console.log(event);
      this.selectedCategory = event
    }
  }
})

demo Jsfiddle

Leave a comment