VueJS – Watch Property

Bài này chúng ta sẽ tìm hiểu về Watch property. Watch property sẽ theo dõi sự thay đổi của dữ liệu và thực hiện hành động nào đó.

Ví dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Trong ví dụ trên, chúng ta có 2 input tương tác với dữ liệu là kilometersmeters. Trong data property, kilometersmeters được khởi tạo với giá trị ban đầu bằng 0. Có watch property là 1 object với 2 functions kilometersmeters. 2 functions này sẽ chuyển đổi kilometers sang meters và ngược lại.

Với 2 function này, khi giá trị kilometers hay meters thay đổi, chúng sẽ cập nhật lại giá trị cho kilometers và meters.

Kết quả

Nhập giá trị vào ô Kilometers.

Và ngược lại, nhập giá trị vào ô Meters.