[英]Need to filter data using check boxes in one component, here data which is coming from axios in another component
I am able to get the data from axios in one component but failing to filter it in checkbox on click event. 我能够从axios的一个组件中获取数据,但是无法在click事件的复选框中对其进行过滤。 I am struggling with how to transfer axios data to another component, which is parent and which is child? 我在如何将axios数据传输到另一个组件(父级和子级)方面感到很挣扎。
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 我在子组件中创建了复选框,并在父组件中从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; } } } }
使用Vuelidate验证输入。
Need to add eventBus to instance and call at data change, and use that emit when we need use the changed data. 需要将eventBus添加到实例并在数据更改时调用,并在需要使用更改的数据时使用该方法发出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.