How to append search parameters to URL

Hi everyone,
I am new to Vue js. I am building a project with Vue js on the front end and Laravel at the backend.
I have some radion buttons and checkboxes to filter data from the database.

So app should work like this, when user is main url (localhost:8000), show all the products
when user click the radio button for search, just append its value to url and search data from database.
localhost:8000/products is main page
when user choose red, I need localhost:8000/products?color=red
and again when user choose green, I need localhost:8000/products?color=red&color=green or localhost:8000/products?color=red,green
when user click price, I want when user choose red, I need localhost:8000/products?color=red&color=green&price=100

But I have never done this type of search and I am stuck here.

    <template>
      <div class="filters">
    	<h1>Filter By Color</h1>
    	<input type="radio" @click="filterData" v-model="color" name="color" value="red"/>Red
    	<input type="radio" @click="filterData" v-model="color" name="color" value="green"/>Green
    	<input type="radio" @click="filterData" v-model="color"  name="color" value="white"/>White
    	<h1>Filter by price</h1>
    	<input type="checkbox" @click="filterData" v-model="price" name="price" value="below50"/>below50
    	<input type="checkbox" @click="filterData"  v-model="price" name="price" value="below100"/>below100
    	<input type="checkbox" @click="filterData" v-model="price" name="price" value="below150"/>below150
      </div>
      <div class="products" v-for="(product,index) in allproducts" :key="index">
    	  //display all products
      </div>
    </template>
    <script>
    	export default{
    		data() {
    			return {
    				allproducts:[],
    				price:[],
    				color:''
    			}
    		},
    		methods:{
    			filterData() {
    				axios.get(`/endpoint`).then((response)=>{	
    					this.allproducts =  response.data
    				})
    			}
    		},
    		mounted() {
    			axios.get(`/endpoint`).then((response)=>{
    				this.allproducts =  response.data
    			})
    		}
    	}
    </script>

Hello sir
we have many suggestions for you in the methods you are making an API:

  • you can use the “param” option to send as a payload for the get Method.
axios.get('/endpoint',
{
params:{
color: color,
price: price
}
}).then((response)=>{
this.allproducts = [response.data](http://response.data/)
})
  • But if you are starting a new project the suggestion is to use Laravel Orion for backend which is a great tool for API crud operations as well as Relation handling. You can couple Orion with Vue, Nuxt which is good for Server Sider Rendering( SSR) on the frontend, Using the two tools you can do search, filter, order , eagerload and so much more with every data you want from the backend.

Hope this helps!