javascript - How to filter multiple radio selections in vue js

Question

I have an issue with filtering multiple radio buttons. I have a website where I implemented two filters, Gender and Color. When I click on specific gender and color, the result must be shown related to the selected gender and color. But I am unable to figure out how to fix this. Can anyone help me, please? Here is my code

HTML:

<template>
  <div class="container">
    {{searchProducts}}
    <div class="search-area">
    <br>
     <h2>Gender</h2>
    <label>All:</label>
    <input type="radio" value="All" v-model="filterGender" />
    <div class="gender" v-for="gender in gendersData" v-bind:key="gender.id">
    <label>{{gender}}:</label>
    <input type="radio" :value="gender" v-model="filterGender" />
    </div>
  <h2>Colors:</h2>
    <div class="material" v-for="color in colorData" v-bind:key="color.id">
        
    <label>{{color}}:</label>
    <input type="radio" :value="color" v-model="filterColor" />
    </div>

    
 
    </div>

    
<div class="card" style="width: 18rem;"  v-for="product in searchProducts" v-bind:key="product.id" >
     
     <img :src="product.ProductImageURL" class="card-img-top" alt="">
     <div class="card-body">
       <h5 class="card-title">{{product.ProductName}}</h5>
 
  </div>
</div>

  </div>
</template>

Vue js code:

<script>
import axios from 'axios';

export default {
  name: 'HomePage',
  data(){
    return{
      searchProduct:'',
      filterGender:[],
      products:[],
      gendersData:[],
      colorData:[],
      filterColor:"",
  
      

    }
  },
  computed:{
    
       searchProducts(){
           var searchProducts=[];
           if(this.filterGender.includes('All'))
           {
              return this.products.filter(product=>{
              searchProducts.push(product);
              }); 
           }
           if(this.filterGender.includes('Women'))
           {
            return this.products.filter(product=>{
            
                 if(product.Gender === 'female')
                 {
                  searchProducts.push(product);
                 }
                    
              }); 

           }
            if(this.filterGender.includes('Men'))
           {
            return this.products.filter(product=>{
                 if(product.Gender === 'male'  )
                 {
                   searchProducts.push(product);
                 }
              }); 

           }
          if(this.filterColor)
           {
               return this.products.filter(product=>{
                 if(product.Color === this.filterColor)
                 {
                   searchProducts.push(product);
                 }
              }); 
           }
         return searchProducts;

           
       }
  },
  mounted()
  {
    axios.get('api1')
    .then(res=>{
      this.products = res.data;


    });
    axios.get('api2')
    .then(res=>{
      this.gendersData = res.data.Gender;
      this.colorData = res.data.Color;

    });
 
  }

}
</script>

Note: I have removed the API link because I am accessing it from my local server.

question from:https://stackoverflow.com/questions/65850269/how-to-filter-multiple-radio-selections-in-vue-js

Answer 1

Waitting for answers