VueJS - Propiedad de reloj

En este capítulo, aprenderemos sobre la propiedad Watch. Usando un ejemplo, veremos que podemos usar la propiedad Watch en VueJS.

Ejemplo

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         Kilometers : <input type = "text" v-model = "kilometers">
         Meters : <input type = "text" v-model = "meters">
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
      </script>
   </body>
</html>

En el código anterior, hemos creado dos cuadros de texto, uno con kilometers y otro con meters. En la propiedad de datos, los kilómetros y metros se inicializan a 0. Hay un objeto de reloj creado con dos funcioneskilometers y meters. En ambas funciones se realiza la conversión de kilómetros a metros y de metros a kilómetros.

A medida que ingresamos valores dentro de cualquiera de los cuadros de texto, lo que se cambie, Watch se encarga de actualizar ambos cuadros de texto. No tenemos que asignar especialmente ningún evento y esperar a que cambie y hacer el trabajo adicional de validación. Watch se encarga de actualizar los cuadros de texto con el cálculo realizado en las funciones respectivas.

Echemos un vistazo a la salida en el navegador.

Ingresemos algunos valores en el cuadro de texto de kilómetros y veamos cómo cambia en el cuadro de texto de metros y viceversa.

Ingresemos ahora en el cuadro de texto metros y veamos cómo cambia en el cuadro de texto kilómetros. Esta es la pantalla que se ve en el navegador.