Backend Implementation

@GetMapping("/query/{type}/{status}")
public List<article> retrieveArticles(
    @PathVariable String type, 
    @PathVariable String status
) {
    return articles.stream()
        .filter(a -> a.getType().equals(type) && a.getStatus().equals(status))
        .collect(Collectors.toList());
}</article>

Frnotend Implementation

export function fetchArticles(filters) {
    return axios.get("/article/query", { params: filters });
}

const articles = ref([]);
const filterCriteria = ref({
    type: "",
    status: ""
});

const loadArticles = async () => {
    articles.value = await fetchArticles({ ...filterCriteria.value });
};

Error Encountered

GET http://localhost:8080/article/query?type=news&status=published 500
[Vue warn]: Unhandled error in event handler

Solution Approach 1

Adjust frontend to match backend path parameter structure:

export function fetchArticles(filters) {
    const url = `/article/query/${filters.type}/${filters.status}`;
    return axios.get(url);
}

Solution Approach 2

Modify backend to accept query parameters instead of path variables:

@GetMapping("/query")
public List<article> retrieveArticles(
    @RequestParam("type") String type,
    @RequestParam("status") String status
) {
    return articles.stream()
        .filter(a -> a.getType().equals(type) && a.getStatus().equals(status))
        .collect(Collectors.toList());
}</article>