home PYTHONJAVA
 

Vue.js response interface

Vue can add a data dynamic response interface.

For example, in the following example, we use the $watch attribute to monitor the data, and $watch must be added outside of the Vue instance to achieve the correct response.

In the instance, the counter will increment by 1 by clicking the button. setTimeout sets the value of the calculator plus 20 after 10 seconds.

Instance

<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('Change in counter value: ' + oval + ' becomes ' + nval + '!'); }); setTimeout( Function(){ Vm.counter += 20; },10000 ); </script>

Vue does not allow dynamic addition of new root-level responsive properties on instances that have already been created.

Vue cannot detect the addition or deletion of object properties. The best way is to declare the root-level responsive property before initializing the instance, even if it is just a null value.

If we need to implement the addition or removal of properties during the run, we can use the global Vue, Vue.set and Vue.delete methods.

Vue.set

The Vue.set method is used to set the properties of an object. It can solve the limitation that Vue can't detect the added property. 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

Instance

<div id= " app"> <p style = "font-size:25px;">Counter: {{ products.id }}</p > <button @ click = "products.id++" style = "font-size: 25px;">point me< /span></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('Change in counter value: ' + oval + ' becomes ' + nval + '!'); }); </script>

In the above example, the following code was used to create a variable myproduct at the beginning:

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

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

Var vm = new Vue({ El: '#app', Data: { Counter: 1, Products: myproduct } });

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

vm.products.qty = /span>"1";

View console output:

As you can see in the image above, the quantity attribute qty has been added to the product, but the get/set method is only available for the id, name, and price attributes, but not in the qty attribute.

We can't implement a response by adding a Vue object. Vue primarily creates all properties at the beginning. If we want to implement this function, we can do it with Vue.set:

Instance

<div id= " app"> <p style = "font-size:25px;">Counter: {{ products.id }}</p > <button @ click = "products.id++" style = "font-size: 25px;">point me< /span></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('Change in counter value: ' + oval + ' becomes ' + nval + '!'); }); </script>

The output from the console shows that the get/set method is available for the qty property.

Vue.delete

Vue.delete is used to remove dynamically added attributes. Syntax:

Vue.delete( target, key )

Parameter description:

  • Target: can be an object or an array
  • Key : can be a string or a number

Instance

<div id= " app"> <p style = "font-size:25px;">Counter: {{ products.id }}</p > <button @ click = "products.id++" style = "font-size: 25px;">point me< /span></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('Change in counter value: ' + oval + ' becomes ' + nval + '!'); }); </script>

.

From the output of the above image, we can see that the price attribute has been deleted, leaving only the id and name attributes, and the get/set method of the price attribute has also been deleted.






welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.