Необходимо фильтровать данные с помощью флажков в одном компоненте, здесь данные, поступающие от axios в другом компоненте

Question

Я могу получить данные из axios в одном компоненте, но не могу отфильтровать их в флажке при событии щелчка. Я борюсь с тем, как перенести данные axios в другой компонент, который является родительским, а какой дочерним?

Я создал флажки в дочернем компоненте и данные из axios в родительском компоненте, пытаясь добавить событие в дочерний компонент, чтобы отфильтровать данные по цветам в моих родительских данных

> // 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

Нужно добавить eventBus к экземпляру и вызывать при изменении данных, и использовать его, когда нам нужно использовать измененные данные.

Для справки

Answer 2

Используйте Vuelidate для проверки ввода.