Need to filter data using check boxes in one component, here data which is coming from axios in another component

Question

I am able to get the data from axios in one component but failing to filter it in checkbox on click event. I am struggling with how to transfer axios data to another component, which is parent and which is child?

I had created checkboxes in child component and data from axios in parent component trying to add event in child component checkbox to filter data according to colors in my parent data

> // data to get from axios [      {  
>       "img_slug":"./products/product_1.jpg",
>       "color":"White",
>       "size":"S",
>       "styles":"Solid",
>       "Fit":"slim",
>       "sleeves":"full"    },    {  
>       
>       "img_slug":"./products/product_2.jpg",
>       "color":"Red",
>       "size":"L",
>       "styles":"Solid",
>       "Fit":"slim",
>       "sleeves":"full"    },    {  
>       
>       "img_slug":"./products/product_3.jpg",
>       "color":"Blue",
>       "size":"M",
>       "styles":"Solid",
>       "Fit":"slim",
>       "sleeves":"full"    } ]
> 
> // parent component
> 
> created () {
>     axios
>       .get('/products.json')
>         .then(response =>  
> { 
>             console.log(response.data);
>             this.data = response.data })
>         .catch(error => console.log(error))   },         methods: {
>     handleClick: function() {
>       this.$emit('clickedSomething')
>     }   },   props:{
>     item: {           type: Object,           required: false         }   }
> 
> // Child component export default {   name: 'parent',   components: {
>     Child   },   props:{
>     item: {           type: Object,           required: true      }   },   computed: {        selectedFilters: function() {           let filters = [];           let
> checkedFiters = this.color.filter(obj => obj.checked);
>           checkedFiters.forEach(element => {
>               filters.push(element.value);            });             return filters;         }   },   data(){
>       return {
>           
>       // list of tags to giving each stack a different color
>                   colors: [
>               {
>                   checked: false,
>                   value: 'Red'
>               },
>               {
>                   checked: false,
>                   value: 'Blue'
>               },
>               {
>                   checked: false,
>                   value: 'Black'
>               },
>               {
>                   checked: false,
>                   value: 'White'
>               }
>           
>       ]
>       };
>          },   methods: {
>     // handleClickInParent: function() {
>     //   // console.log('This is Parent Component');
>     // }
>     handleClickInParent: function() {
> 
>   this.filteredData = data;            
>        let filteredDataByfilters = [];            
>        let filteredDataBySearch = [];
>           // first check if filters where selected            if
> (this.selectedFilters.length > 0) {
>               filteredDataByfilters= this.filteredData.filter(obj => 
    this.selectedFilters.every(val => obj.color.indexOf(val) >= 0));
>               this.filteredData = filteredDataByfilters;          }                   }   } }

Answer 1

使用Vuelidate验证输入。

Answer 2

Need to add eventBus to instance and call at data change, and use that emit when we need use the changed data.

For reference