VueJS Practice #3 – Instance Management

Want to become an expert in Python 3 and Django 3?

Don’t Miss the #TwitterFiles!

Wecome to the third VueJS Practice from German IT Academy. In this module we are going to make sure that we understand the properties and the life cycle of a Vue-Component (or instance).

Problem

Create a Component ProductDetail.vue with

  • a product object with random values for keys (id, price, name)
  • a text input-field „quantity“ with default value „0“
  • a text output calculating the total Costs (product price * quantity)

The Component must have following behavior:

  • Before the Component has been mounted, a text output „Specify Quantity.“ appears .
  • Data property „quantity“ is automatically updated with the input-field quantity.
  • After Quantity has been updated, a text output „Quantity updated.“ appears.

Hint

  • For the text above all Content: think about a data property that will be changed on certain Component life cycles.
  • Regarding the quantity and input-field: Do you remember what v-model is good for?
  • For the behavior part: the words „before“ and „after“ should be ringing a bell in your head. Take a look at the life cycle diagram of VueJS Components/Instances.

Solution

Let’s jump right into the code. Read it and see if you understand everything. If not, see the explanation after the code.

<template>
  <div class="ProductDetail">
      <h2>{{notification}}</h2>
      <p>
        Quantity: <input type="text" v-model="quantity"><br>
        Total Value: {{ totalValue }}$
      </p>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',

  data() {
    return {
      product: {
        id: 1,
        name: 'VueJS Certificate',
        price: 999
      },
      quantity: 0,
      // You could set 'notification' to desired default value 
      // instead doing it trough life cycle hook 
      notification: '' 
    }
  },

  computed: {
    totalValue: {
      get() {
        return this.quantity*this.product.price
      }
    }
  },

  beforeMount() {
    if(this.quantity==0) {
      this.notification = 'Please specify quantity!'
    }
  },

  updated() {
    if(this.quantity != 0) {
      this.notification = 'Quantity updated!'
    }
  }
}
</script>

<style scoped>
h2 {
  color:orange;
  border: 1px solid orange;
  width:50%;
  margin: 0 25% 0 25%;
}
input {
  height: 40px;
  width: 70px;
  font-size: 25px;
}
.ProductDetail {
  text-align: center;
}

.ProductDetail p {
  font-size: 30px;
}
</style>

Starting with unimportant: styles are just css styles. The {{notification}} in <template> can be either „Please specify quantity“ or „Quantity updated!“. The value of this data property changes with the life cycle hooks beforeMount() and updated(). The computed totalValue is an automatic way recalculate a value as soon as a data property (in our case quantity) changes. And then there are the data properties like products with dummy data. The input-field is mapped with quantity data property thanks to v-model.

This is how our result looks like. Simplistic and solves the Task/Problem at hand.

We hope you liked our VueJS Practice and learned something new. If you want to get a deeper insight into how VueJS works, consider enrolling in our VueJS Certificate Junior Course.

Andrey Bulezyuk

Andrey Bulezyuk is a Lead AI Engineer and Author of best-selling books such as "Algorithmic Trading", "Django 3 for Beginners", "#TwitterFiles". Andrey Bulezyuk is giving speeches on, he is coaching Dev-Teams across Europe on topics like Frontend, Backend, Cloud and AI Development.

Protocol Wars

Understanding the Key Players: Ethernet, Wi-Fi, Bluetooth, and Zigbee The Invisible Battles: How Data Streams Clash in the Airwaves Adapting to an Evolving Tech Landscape: New Contenders and Challenges User Empowerment: How Our Choices Determine the Winning Protocol...

Google Earth 3D Models Now Available as Open Standard (GlTF)

Unleashing the Power of 3D: A Comprehensive Guide to Google Earth's GlTF Models From Virtual to Reality: How to Utilize Google Earth's GlTF Models for Your Projects Breaking Down the Barriers: The Impact of Open Access to Google Earth's 3D Models on the IT Industry...

When you lose the ability to write, you also lose some of your ability to think

Reviving the Creative Process: How to Overcome Writer's Block in IT Staying Sharp: Techniques for Keeping Your Mind Active in the Tech World From Pen to Keyboard: Transitioning Your Writing Skills to the Digital Age Collaboration and Communication: The Importance of...

Reverse engineering Dell iDRAC to get rid of GPU throttling

Understanding Dell iDRAC: An Overview of Integrated Remote Access Controller Breaking Down the Barriers: How to Disable iDRAC GPU Throttling for Maximum Performance Optimizing Your Dell Server: Tips and Tricks for GPU Throttle-Free Operation Maintaining Stability and...

0 Kommentare