@pedroroccon Why not pass the URL to query as a prop to your Vue component? I’m not really sure what benefit you’re getting by using Vue to query and render products, though.
Jun 25, 2020
2
Level 10
Getting the URL Query string and using in an API call
Greetings!
I'm developing a simple application to list products with Laravel and Vue. When I access /products my Vue component list all avaliable products.
<template>
<div class="products-list">
<ul>
<li v-for="(product, index) in products">{{ product.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
products: [],
};
},
methods: {
fetchProducts() {
axios.get('/api/products').then(response => {
this.products = response.data;
}).catch(err => console.error(err));
},
},
created() {
this.fetchProducts();
}
};
</script>
If I call my API with URL: /api/products?s=Apple, the API will returns me only products with "Apple" in name.
My question is: How can I get the query string of my current URL, and pass it to my /api URL?
Example: If I visit /products?s=Apple, then my Vue component should call the /api/products?s=Apple.
Regards!
Level 80
1 like
Please or to participate in this conversation.