Vue.js - How to show by default all data from API although I'm using filters, sorting and search?

Question

I'm using Vue.js 3 and here is my code

<template>
  <h5>List of Products</h5>

        <h3>Filter</h3> 
        <button v-on:click="resetOptions">Reset</button>
        <button v-on:click="sorting">Sorting</button>
        <button v-on:click="sorting2">Sorting2</button>
        <select v-model="category">
            <option value="Accessories">Accessories</option>
            <option value="Laptop">Laptop</option>
            <option value="Stationary">Stationary</option>
        </select> 
        <div>
        <input type="checkbox" name="test" id="test" v-model="city"  value='Roma'  /> 
        <label for="test"> Roma</label>
        <input type="checkbox" name="test2" id="test2" v-model.trim="city" value='Barselona'  />
        <label for="test2"> Barselona</label>
        <input type="checkbox" name="test3" id="test3" v-model.trim="city" value='Milano'  />
        <label for="test3"> Milano</label>
        </div> 
         <!-- <select v-model="city">
            <option value="Barselona">Barselona</option>
            <option value="Roma"> Roma </option>
            <option value="Milano">Milano</option>
        </select>   -->

        <input type="text" v-model="name" placeholder="Filter By Name"/>

        <label for="vol">Price (between 0 and 1000):</label>
    
        <input type="range" v-model.trim="range" min="0" max="1000" step="10"/>  
        <ul>
            <li v-for="product in filterProducts" :key="product.price"> Product Name : {{product.name}} - Price : {{product.price}} ({{product.category}}) 
                {{product.city}}
            </li>
        </ul>
</template>

<script>
window.axios = require("axios");
export default {
 data: ()=> ( {

            city:['Barselona', 'Milano' , 'Roma'],
            category: '',
            name: '',
            range: '10000',
            products: [] ,

        }),
         mounted(){
             axios.get('http://localhost:3000/products')
             .then(response =>this.products = response.data);
         },

              computed: {
            filterProducts: function(){
                return this.filterProductsByName(this.filterProductsByRange(this.filterProductsByCity(this.filterProductsByCategory(this.products))))
            },

        },
        
        methods: {

            filterProductsByCategory: function(products){
                return products.filter(product => !product.category.indexOf(this.category))
            },

            filterProductsByName: function(products) {
                return products.filter(product => !product.name.toLowerCase().indexOf(this.name.toLowerCase()))
            },

            filterProductsByCity: function(products) {
                     return products.filter(product => this.city.indexOf(product.city) !== -1)
            },

             filterProductsByCity2: function(products) {
                 return products.filter(product => !product.city.indexOf(this.city))
             },

            filterProductsByRange: function(products){
                return products.filter(product => (product.price >= 0 && product.price <= this.range) ? product : '')
            },

            sorting:function(){
                this.products.sort((a,b)=>(a.price > b.price) ? 1 : -1)
            },
             sorting2:function(){
                this.products.sort((a,b)=>(a.price < b.price) ? 1 : -1)
            },

            uniqueCheck(e){
            this.city = [];
            if (e.target.checked) {
                 this.city.push(e.target.value);
               }
         },

            resetOptions:function(){
                this.category='',
                this.city='',
                this.name='',
                this.range='1000'
            },
        },

}
</script>

<style>

</style>

I want to show all data from API by default, now shows because I put in city aray some values, but I want to my checkboxes are unchecked by default and show my all data by default and when I check some check box to filter my data. How I can do that?

Here is my photo of fake json

Answer 1

Update each of your filter methods to return the original products array when the corresponding filter is not set:

export default {
  methods: {
    filterProductsByCategory: function (products) {
      return this.category
        ? products.filter((product) => !product.category.indexOf(this.category))
        : products
    },

    filterProductsByName: function (products) {
      return this.name
        ? products.filter(
            (product) =>
              !product.name.toLowerCase().indexOf(this.name.toLowerCase())
          )
        : products
    },

    filterProductsByCity: function (products) {
      return this.city && this.city.length
        ? products.filter((product) => this.city.indexOf(product.city) !== -1)
        : products
    },

    filterProductsByCity2: function (products) {
      return this.city && this.city.length
        ? products.filter((product) => !product.city.indexOf(this.city))
        : products
    },

    filterProductsByRange: function (products) {
      return this.range
        ? products.filter((product) =>
            product.price >= 0 && product.price <= this.range ? product : ""
          )
        : products
    },
  }
}

demo