I am working on fetching data from jsonplaceholder using Axios in Vue. I have created a limit with a select input where the user can specify how many posts they want to see. The default number of posts displayed is 10. Initially, when the page loads, everything works correctly and the user can see 10 posts. However, when the user tries to change the limit, it still displays only 10 posts. Can someone please help me troubleshoot this issue? Below is my code:
<template>
<section class="text-center">
<div v-if="loading" class="spinner-border text-center text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</section>
<router-link class="btn btn-primary" :to="{name:'createPost'}">Add Post</router-link>
<select v-model="selected" class="form-control" >
<option disabled value="">Choose number of posts</option>
<option value="10">10 Posts</option>
<option value="20">20 Posts</option>
<option value="50">50 Posts</option>
<option value="100">All Posts</option>
</select>
<section v-if="!loading" class="col-4" v-for="post in posts" :key="post.id">
<Card :post="post" />
</section>
</template>
<script setup>
import axios from 'axios'
import {ref} from "vue";
import Card from "@/components/posts/Card";
let loading = ref(true)
let posts = ref([])
let selected =ref('10')
function userReq(){
// Using Axios to fetch data based on the selected limit
axios.get(`https://jsonplaceholder.typicode.com/posts?_limit=${selected.value}`)
.then(response=> {
posts.value = response.data
loading.value=false
console.log('response',response)
})
.catch(()=>console.log('error'))
}
userReq()
</script>
<style scoped>
</style>