We now have a youtube channel. Subscribe!

Vue.js | Reactive Interface

Vue.js Reactivate Interface


Hello folks! Welcome back to a new section of our tutorial on Vue.js. In this tutorial post, we will be discussing about Vue.js Reactive Interface.

Vue.js provides options to include reactivity to properties, which are added dynamically. Assume we've already created vue instance and need to add the watch property. It can be done as follows -

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

There is a property counter defined as 1 in data object. The counter is incremented on the click of the button.

Vue instance is already created. To include watch to it, we need to do it as follows -

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

We need to utilize $watch to include watch outside the vue instance. There is an alert included, which shows the value change for the counter property. There is also a timer function added, i.e. setTimeout, which sets the counter value to 20.

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

Whenever the counter is changed, the alert from the watch method will get triggered as shown in the following screenshot.

counter

Vue.js cannot detect property addition and deletion. The best way is to always declare the properties, which needs to be reactive upfront in the vue instance. In case we need to add properties at run time, we can make use of Vue global, Vue.set, and Vue.delete methods.


Vue.set Method

It helps in setting a property on an object. It is used to get around the limitation that Vue cannot detect property addition.

Syntax

Vue.set( target, key, value )

Where,

target: Can be an object or an array

key: Can be a string or number

value: Can be any type

Example

Let us take a look at an example.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

In the above example, we created a variable myproduct at the start using the following piece of code.

var myproduct = {"id":1, name:"book", "price":"20.00"};

It is given to the data object in Vue instance as follows -

var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});

Consider, we want to add one more property to the myproduct array after the creation of the vue instance. It can be done as follows -

vm.products.qty = "1";

Output

Let us see the output in the console.

myproduct_array

As seen from the above output, in products the quantity is added. The get/set methods, which basically adds reactivity is available for the id, name, and price, and not available for qty.

We cannot achieve the reactivity by simply adding vue object. Vue.js mainly want all of its properties to be created at the start. But, in case we need to add it later, we can make use of Vue.set. For this, we need to set it via vue global, i.e. Vue.set.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

We have used Vue.set to add the qty to the array using the following piece of code.

Vue.set(myproduct, 'qty', 1);

Output

We have consoled the vue object and the output is given below.

product

Now, we can see the get/set for qty added using Vue.set.


Vue.delete Method

This method is used to delete the property dynamically.

Syntax

Vue.delete( target, key )

Where,

target: Can be an object or an array

key: Can be a string or a number

To delete any property, we can make use of Vue.delete as in the following code.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

In the above example, we have made use of Vue.delete to delete the price from the array using the following piece of code.

Vue.delete(myproduct, 'price');

Output

Following below is the output, we see the console.

delete

After deletion, we can see just the name and id as the price is deleted. We can also notice that the get/set methods are deleted.


Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be starting a new series on ExpressJS.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain