需要使用一個組件中的復選框過濾數據，這里的數據來自另一組件中的axios

Question

我能夠從axios的一個組件中獲取數據，但是無法在click事件的復選框中對其進行過濾。 我在如何將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

使用Vuelidate驗證輸入。

Answer 2

需要將eventBus添加到實例並在數據更改時調用，並在需要使用更改的數據時使用該方法發出。

以供參考