Vue.js 101 : Efficient Data Presentation with Vue.js: Displaying Filtered and Sorted Data

Screenshot from the tutorial

Vue.js 101: Efficient Data Presentation with Vue.js

In today's digital landscape, data presentation is a crucial aspect of web development. With the rise of JavaScript frameworks, Vue.js stands out as a powerful tool for creating dynamic user interfaces. In this blog post, we will explore how to efficiently display filtered and sorted data using Vue.js.

What is Vue.js?

Vue.js is a progressive JavaScript framework that is used to build user interfaces. It is particularly known for its simplicity and flexibility, making it a favorite among developers. Vue allows you to create reactive components that can efficiently manage and display data, enhancing the user experience.

Setting Up Your Vue.js Environment

Before diving into filtering and sorting data, you need to set up your Vue.js environment. You can easily create a Vue project using Vue CLI. Follow these steps:

1. Install Node.js: Ensure you have Node.js installed on your machine. You can download it from Node.js official website.

2. Install Vue CLI: Open your terminal and run the following command:

   npm install -g @vue/cli
   

3. Create a New Project: Generate a new Vue project by executing:

   vue create my-vue-app
   

4. Navigate to Your Project:

   cd my-vue-app
   

5. Serve the Application: Start the development server:

   npm run serve
   

Now that your environment is set up, let’s delve into filtering and sorting data.

Displaying Data in Vue.js

Creating a Sample Data Set

For this tutorial, we will create a simple list of items to demonstrate filtering and sorting. Let's assume we have an array of products:

data() {
  return {
    products: [
      { name: "Apple", price: 1.2 },
      { name: "Banana", price: 0.8 },
      { name: "Cherry", price: 2.5 },
      { name: "Date", price: 3.0 },
      { name: "Elderberry", price: 1.5 },
    ],
    searchQuery: "",
    sortKey: "name",
  };
},

Filtering Data

To filter the displayed products based on a search query, you can create a computed property. This property will return a filtered array of products that match the search query.

computed: {
  filteredProducts() {
    return this.products.filter(product => {
      return product.name.toLowerCase().includes(this.searchQuery.toLowerCase());
    });
  },
},

Sorting Data

To sort the data, you can also create another computed property that sorts the filteredProducts based on the selected sort key. You can modify the sortKey to either "name" or "price":

computed: {
  sortedProducts() {
    return this.filteredProducts.sort((a, b) => {
      if (this.sortKey === "price") {
        return a.price - b.price;
      }
      return a.name.localeCompare(b.name);
    });
  },
},

Putting It All Together

Now, let’s put everything together in our Vue component template. Here’s how you can structure your HTML:

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search products" />
    <select v-model="sortKey">
      <option value="name">Sort by Name</option>
      <option value="price">Sort by Price</option>
    </select>
    
    <ul>
      <li v-for="product in sortedProducts" :key="product.name">
        {{ product.name }} - ${{ product.price.toFixed(2) }}
      </li>
    </ul>
  </div>
</template>

Explanation of the Template

• Input Field: The input field allows users to filter products based on their names.
• Select Dropdown: Users can choose how to sort the products, either by name or by price.
• List Rendering: The v-for directive is used to loop through the sortedProducts array and display each product.

Conclusion

In this blog post, we covered how to efficiently present filtered and sorted data with Vue.js. By leveraging Vue's reactive capabilities, we created a simple application that allows users to interact with data seamlessly. This approach not only enhances user experience but also maintains clean and manageable code.

With these foundational skills, you can build more complex applications that handle data dynamically. Happy coding with Vue.js!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios