5 Real life use cases of VueJs Computed properties, with code examples.

Jumzeey — Wed, 31 May 2023 15:39:29 +0000

In Vue.js, computed properties are functions that are used to calculate and return a value based on the current state of the Vue instance. They are defined in the computed property of a Vue component and can be accessed like data properties within the template or other computed properties.

Computed properties are useful when you need to perform some logic or calculations on the data and generate a derived value that can be used in the template. The computed property will be updated automatically whenever the data it depends on changes, ensuring that the value is always up to date.

Here's an example of how to define computed properties in Vue.js:

data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
    reversedFullName() {
      return this.fullName.split('').reverse().join('');
    }
  }

In the example above, we have a component with two data properties firstName and lastName. We define two computed properties fullName and reversedFullName. The fullName computed property concatenates the first and last name, while the reversedFullName computed property reverses the characters of the fullName property.

In the template, we can then use these computed properties like regular data properties:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <p>Reversed Full Name: {{ reversedFullName }}</p>
  </div>
</template>

Whenever the firstName or lastName data properties change, the fullName and reversedFullName computed properties will be re-evaluated and the template will be updated accordingly.

Computed properties provide a clean and declarative way to work with derived values in Vue.js and can help keep your code more readable and maintainable.

5 MORE REAL CASE EXAMPLES OF COMPUTED PROPERTIES.

1. Shopping Cart: Calculate the total price or quantity of items in a shopping cart based on the individual item prices and quantities.

<template>
  <div>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - {{ item.price }} - Quantity: {{ item.quantity }}
      </li>
    </ul>
    <p>Total Price: {{ totalPrice }}</p>
    <p>Total Quantity: {{ totalQuantity }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { id: 1, name: 'Item 1', price: 10, quantity: 2 },
        { id: 2, name: 'Item 2', price: 15, quantity: 1 },
        { id: 3, name: 'Item 3', price: 20, quantity: 3 }
      ]
    };
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
    },
    totalQuantity() {
      return this.cartItems.reduce((total, item) => total + item.quantity, 0);
    }
  }
};
</script>

In this example, we have a cartItems array that represents items in a shopping cart. The computed properties totalPrice and totalQuantity calculate the total price and total quantity of items in the cart, respectively, using the reduce() method.

The reduce() method is used with an initial value of 0 for both computed properties. It iterates over the cartItems array and accumulates the total price and quantity by multiplying the price with the quantity for each item.

2. Form Validation: Check if form fields meet certain validation criteria, such as required fields, maximum length, or specific patterns.

<template>
  <form @submit="submitForm">
    <input v-model="name" :class="{ 'is-invalid': !isNameValid }" type="text" placeholder="Name" required>
    <input v-model="email" :class="{ 'is-invalid': !isEmailValid }" type="email" placeholder="Email" required>
    <button type="submit" :disabled="!isFormValid">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  computed: {
    isNameValid() {
      return this.name.length > 0;
    },
    isEmailValid() {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email);
    },
    isFormValid() {
      return this.isNameValid && this.isEmailValid;
    }
  },
  methods: {
    submitForm() {
      // Submit form logic
    }
  }
};
</script>

this example, we have a form with name and email fields. The computed properties isNameValid, isEmailValid, and isFormValid are used for form validation.

The isNameValid computed property checks if the name field has a non-empty value. The isEmailValid computed property uses a regular expression to check if the email field has a valid email format. The isFormValid computed property checks if both the name and email fields are valid.

The CSS class is-invalid is conditionally applied to the input fields based on their validation status.

3. Filtering and Sorting: Compute a filtered or sorted version of a data list based on user-defined criteria, such as filtering products by category or sorting a list of tasks by priority.

<template>
  <div>
    <select v-model="selectedCategory">
      <option value="">All</option>
      <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
    </select>

    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCategory: '',
      categories: [
        { id: 1, name: 'Category 1' },
        { id: 2, name: 'Category 2' },
        { id: 3, name: 'Category 3' }
      ],
      products: [
        { id: 1, name: 'Product 1', price: 10, categoryId: 1 },
        { id: 2, name: 'Product 2', price: 15, categoryId: 2 },
        { id: 3, name: 'Product 3', price: 20, categoryId: 3 }
      ]
    };
  },
  computed: {
    filteredProducts() {
      if (this.selectedCategory) {
        return this.products.filter(product => product.categoryId === this.selectedCategory);
      } else {
        return this.products;
      }
    }
  }
};
</script>

In this example, we have a list of products with name, price, and categoryId properties. The computed property filteredProducts is used to filter the products based on the selectedCategory value.

The element allows the user to select a category, and the v-model directive binds the selected category to the selectedCategory data property.

The filteredProducts computed property filters the products array based on the selected category. If a category is selected, only products with a matching categoryId are returned. If no category is selected, all products are returned.

4. Pagination: Determine the current page and number of pages based on the total number of items and items per page, enabling easy pagination navigation.

<template>
  <div>
    <ul>
      <li v-for="item in paginatedItems" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>

    <div>
      <button @click="previousPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 3,
      items: [
        { id: 1, name: 'Item 1', price: 10 },
        { id: 2, name: 'Item 2', price: 15 },
        { id: 3, name: 'Item 3', price: 20 },
        { id: 4, name: 'Item 4', price: 25 },
        { id: 5, name: 'Item 5', price: 30 },
        { id: 6, name: 'Item 6', price: 35 },
        { id: 7, name: 'Item 7', price: 40 }
      ]
    };
  },
  computed: {
    paginatedItems() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.items.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    }
  },
  methods: {
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

In this example, we have a list of items with name and price properties. The computed properties paginatedItems and totalPages are used for pagination.

The paginatedItems computed property calculates the start and end indices based on the current page and items per page. It uses the slice() method to return a portion of the items array corresponding to the current page.

The totalPages computed property calculates the total number of pages by dividing the total number of items by the items per page and rounding up using Math.ceil().

The previous and next page buttons update the currentPage value, which triggers the re-computation of the paginatedItems computed property and enables navigation between pages.

5. Conditional Styling: Dynamically apply CSS classes or styles to elements based on certain conditions, like highlighting overdue tasks or applying different styles to completed items.

<template>
  <div>
    <ul>
      <li v-for="task in tasks" :key="task.id" :class="{ 'task-overdue': isOverdue(task), 'task-completed': task.completed }">
        {{ task.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: 'Task 1', dueDate: '2023-06-01', completed: false },
        { id: 2, name: 'Task 2', dueDate: '2023-05-30', completed: true },
        { id: 3, name: 'Task 3', dueDate: '2023-06-02', completed: false }
      ]
    };
  },
  methods: {
    isOverdue(task) {
      const dueDate = new Date(task.dueDate);
      const today = new Date();
      return dueDate < today;
    }
  }
};
</script>

<style scoped>
.task-overdue {
  color: red;
  font-weight: bold;
}

.task-completed {
  text-decoration: line-through;
}
</style>

In this example, we have a list of tasks with name, dueDate, and completed properties. The isOverdue method checks if a task is overdue by comparing the due date with the current date.

The v-for directive iterates over the tasks array and applies conditional CSS classes using the :class binding. The task-overdue class is applied to tasks that are overdue, and the task-completed class is applied to completed tasks.

The scoped block defines the styles for the conditional classes. Overdue tasks are displayed in red with bold font weight, and completed tasks have a line-through text decoration.</p> <blockquote> <p>These examples showcase the practical use of computed properties in various real-life scenarios. Feel free to use them in your projects.</p> </blockquote>

My first laravel + vue App

Jumzeey — Fri, 03 Jul 2020 19:41:24 +0000

If you are a beginner in development and you are yet to build your first project, what are you waiting for? give it a shot, even if it has to do with following up a tutorial project, add some spice to it along the way. This project was inspired by andre Madarang youtube channel (https://www.youtube.com/playlist?list=PLEhEHUEU3x5pYTjZze3fhYMB4Nl_WOHI4). The fact that it was a project made by following his youtube tutorial, doesn't mean it was easy. There was quite a boatload of hiccups and obstacles along the way, which almost made me give up on the project. But, I really wanted to complete this project of mine. I really wanted to assign such accomplishment to myself, all of which kept driving me to continue.it began with a mindset of wanting to learn laravel PHP framework, I downloaded several books, but they weren't giving me the push I needed, then I decided it's best I challenge myself big time. Then, my next step was to go to youtube, on searching for laravel, brad traversy media's laravel course came up (https://www.youtube.com/playlist?list=PLillGF-RfqbYhQsN5WMXy6VsDMKGadrJ-). I followed up his tutorial, and I can tell you, he was really good, but deep down inside I needed something much more advanced, something that pose to become a real challenge. On the quest for this, andre course showed up. At first, the course is based on building aa movie app, using TMDB's Api and laravel 7 HTTP client, this alone was enough to spike my interest. So, I was like well..... Let's get to it. We started out by first installing all the needed dependencies, compiling the needed assets via webpack and then building out the UI using Tailwind CSS. This is the first of hearing about tailwind CSS, I wasn't ready to learn a new CSS framework, so I decided to follow up using my knowledge of bootstrap, to cut the long story short, I just decided to give Tailwind a try and it turned out to be great. Along the way, some of the obstacles I faced was integrating laravel livewire (for the play trailer button) and alphine js(for the search component). Eventually, I decided to use my very own vue js to write out the search component, using a step by step guide from (Christain Nicholas - create a searchable dropdownlist-medium)article, which also increased my problems.

vue js doesn't use blade routing.
I had to learn Axios, in order to call the search API endpoints into laravel. To fix the issue of routing in vuejs, vue router wasn't an option for I wasn't building a SPA, so I had to parse the link manually. All in all, it was a really good experience, tackling problems and debugging the app, really gave me a sense of purpose, of wanting to become a developer. Do check out the app at https://zonamv1.herokuapp.com/. I plan to release more features to it in the nearest future. Explore, but please don't break. if you ever want to learn a new framework, try watching a project being built out of it, to begin with, then venture into whichever method works best for you.

DEV Community: Jumzeey

5 Real life use cases of VueJs Computed properties, with code examples.

5 MORE REAL CASE EXAMPLES OF COMPUTED PROPERTIES.

My first laravel + vue App