Vue.js Reactive Interface

Vue can add a dynamic reactive interface for data.

For example, in the following instance, we use the $watch property to listen for data changes. The $watch must be added outside the Vue instance to achieve correct responsiveness.

In this instance, clicking the button increments the counter by 1. The setTimeout function sets the counter to add 20 after 10 seconds.

Example

<div id="app">
    <p style="font-size:25px;">Counter: {{ counter }}</p>
    &lt;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 value changed from ' + oval + ' to ' + nval + '!');
});
setTimeout(
    function(){
        vm.counter += 20;
    }, 10000
);
</script>

Vue does not allow dynamically adding new root-level reactive properties to an already created instance.

Vue cannot detect the addition or deletion of object properties. The best approach is to declare root-level reactive properties before initializing the instance, even if they are empty.

If we need to add or remove properties during runtime, we can use the global Vue, Vue.set, and Vue.delete methods.

Vue.set

The Vue.set method is used to set an object's property. It can resolve the limitation of Vue's inability to detect property addition. The syntax is as follows:

Vue.set(target, key, value)

Parameter description:

• target: can be an object or an array
• key: can be a string or a number
• value: can be of any type

Example

<div id="app">
   <p style="font-size:25px;">Counter: {{ products.id }}</p>
   &lt;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: {
      products: myproduct
   }
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('Counter value changed from ' + oval + ' to ' + nval + '!');
});
</script>

In the above example, a variable myproduct is created at the beginning:

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

This variable is assigned to the data object of the Vue instance.

If we want to add one or more properties to the myproduct array after the Vue instance is created, we can use the following code:

vm.products.qty = "1";

Check the console output:

As seen in the console, the quantity property qty is added to the product, but the get/set methods are only available for the id, name, and price properties, not for the qty property.

We cannot achieve reactivity by simply adding a Vue object. Vue primarily creates all properties at the start. To achieve this functionality, we can use Vue.set:

Example

<div id="app">
<p style="font-size:25px;">Counter: {{ products.id }}</p>
&lt;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: {
      products: myproduct
   }
});
Vue.set(vm.products, 'qty', "1");
vm.$watch('products.id', function(nval, oval) {
   alert('Counter value changed from ' + oval + ' to ' + nval + '!');
});
</script>

<script type="text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('Counter value changed from: ' + oval + ' to ' + nval + '!');
});
</script>

From the console output, it can be seen that the get/set methods are available for the qty property.

Vue.delete

Vue.delete is used to delete dynamically added properties. The syntax is:

Vue.delete( target, key )

Parameters:

• target: can be an object or an array
• key: can be a string or a number

Example

<div id="app">
   <p style="font-size:25px;">Counter: {{ products.id }}</p>
   &lt;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: {
      products: myproduct
   }
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('Counter value changed from: ' + oval + ' to ' + nval + '!');
});
</script>

In the above example, we use Vue.delete to remove the price property. Here is the console output:

From the output, we can see that the price property has been deleted, leaving only the id and name properties, and the get/set methods for the price property have also been removed.