YouTip

Vue can add dynamic reactive interfaces to data. For example, in the following instance, we use the `$watch` property to monitor data. `$watch` must be added outside the Vue instance to achieve correct reactivity. In the example, clicking the button increments the counter. `setTimeout` is set to add 20 to the counter's value after 10 seconds. ## Example var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(nval, oval) { alert('Counter value changed: ' + oval + ' to ' + nval + '!'); }); setTimeout( function(){ vm.counter += 20; },10000 ); [Try it yourself »](#) 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 practice is to declare root-level reactive properties before initializing the instance, even if they are just empty values. If we need to add or delete properties during runtime, we can use the global `Vue.set` and `Vue.delete` methods. ### Vue.set The `Vue.set` method is used to set an object's property. It can solve the limitation where Vue cannot detect the addition of properties. 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 any type ## Example 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: ' + oval + ' to ' + nval + '!'); }); [Try it yourself »](#) In the above example, the following code creates a variable `myproduct` at the beginning: var myproduct = {"id":1, name:"book", "price":"20.00"}; This variable is then assigned to the `data` object of the Vue instance: var vm = new Vue({ el: '#app', data: { products: myproduct } }); If we want to add one or more properties to the `myproduct` object, we can use the following code after the Vue instance is created: vm.products.qty = "1"; Check the console output: !(#) As seen in the image above, 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 property to the Vue object. Vue primarily creates all properties at the beginning. If we want to achieve this functionality, we can use `Vue.set`: ## Example 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: ' + oval + ' to ' + nval + '!'); }); [Try it yourself »](#) !(#) From the console output, we can see that the get/set methods are now available for the `qty` property. ### Vue.delete `Vue.delete` is used to delete dynamically added properties. The syntax is: Vue.delete( target, key ) Parameter description: * target: Can be an object or an array * key : Can be a string or a number ## Example 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: ' + oval + ' to ' + nval + '!'); }); [Try it yourself »](#) In the above example, we use `Vue.delete` to remove the `price` property. Here is the console output: !(#) From the output above, we can see that the `price` property has been deleted, leaving only the `id` and `name` properties. The get/set methods for the `price` property have also been removed.