Hone logo
Hone
Problems

Dynamic Data Display with Query Parameters in Vue

This challenge focuses on building a Vue component that dynamically displays data based on query parameters passed in the URL. This is a common requirement in web applications for filtering, sorting, and customizing views, and understanding how to handle it effectively is crucial for building interactive user interfaces. You'll be creating a component that reads query parameters, applies them to a sample dataset, and renders the filtered data.

Problem Description

You are tasked with creating a Vue component called DataDisplay.vue that fetches and displays a list of items. The component should accept two query parameters: category and sortBy.

  • category: A string representing a category to filter the items by. If no category is provided, all items should be displayed.
  • sortBy: A string representing the field to sort the items by. Valid values are "name" and "price". If no sortBy is provided, the items should not be sorted.

The component should:

  1. Fetch Query Parameters: Retrieve the category and sortBy values from the URL using Vue Router's $route object.
  2. Filter Data: Filter the items array based on the category query parameter.
  3. Sort Data: If the sortBy query parameter is present and valid, sort the filtered items array accordingly.
  4. Display Data: Render the filtered and sorted data in a simple list format.

Expected Behavior:

  • When the component mounts, it should read the query parameters from the URL.
  • If a category is provided, only items matching that category should be displayed.
  • If a sortBy is provided, the items should be sorted by the specified field.
  • The component should re-render whenever the query parameters change (e.g., the user navigates to a different URL).
  • If an invalid sortBy value is provided, the items should not be sorted.

Edge Cases to Consider:

  • What happens if the query parameters are missing? (Default to displaying all items, no sorting)
  • What happens if the sortBy parameter has an invalid value? (Do not sort)
  • How should the component handle potential errors during data fetching (although data is hardcoded in this case)?

Examples

Example 1:

Input: URL: /data?category=electronics&sortBy=price
Output: A list of items where the category is "electronics", sorted by price in ascending order.
Explanation: The component filters the items to only include those with category "electronics" and then sorts them by the "price" property.

Example 2:

Input: URL: /data?category=clothing
Output: A list of items where the category is "clothing", in their original order.
Explanation: The component filters the items to only include those with category "clothing", but since no sortBy parameter is provided, the items are not sorted.

Example 3:

Input: URL: /data?sortBy=name
Output: A list of all items, sorted by name in ascending order.
Explanation: No category filter is applied, so all items are displayed. The items are sorted by the "name" property.

Example 4:

Input: URL: /data?category=books&sortBy=invalidField
Output: A list of items where the category is "books", in their original order.
Explanation: The component filters the items to only include those with category "books", but since the sortBy parameter is invalid, the items are not sorted.

Constraints

  • The component must be written in TypeScript.
  • You are provided with a sample items array (see Notes).
  • The component should use Vue Router for accessing the query parameters.
  • The sorting should be done in ascending order.
  • The component should be functional (using setup function).
  • The component should not perform any external API calls.

Notes

Here's the sample items array you can use:

const items = [
  { name: 'Laptop', category: 'electronics', price: 1200 },
  { name: 'T-Shirt', category: 'clothing', price: 25 },
  { name: 'Headphones', category: 'electronics', price: 100 },
  { name: 'Jeans', category: 'clothing', price: 60 },
  { name: 'Book', category: 'books', price: 15 },
  { name: 'Smartphone', category: 'electronics', price: 800 },
];

You'll need to install Vue Router: npm install vue-router or yarn add vue-router. Remember to configure Vue Router in your main.ts or similar entry point. The component should be placed in a route like /data. Focus on the component's logic for handling query parameters and displaying the data. Assume the necessary Vue Router setup is already in place.

Loading editor...
typescript