VueJS - Perhatikan Properti

Di bab ini, kita akan belajar tentang properti Watch. Menggunakan contoh, kita akan melihat bahwa kita dapat menggunakan properti Watch di VueJS.

Contoh

<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>

Pada kode di atas, kami telah membuat dua kotak teks, satu dengan kilometers dan lainnya dengan meters. Dalam properti data, kilometer dan meter diinisialisasi ke 0. Ada objek jam tangan yang dibuat dengan dua fungsikilometers dan meters. Pada kedua fungsi tersebut dilakukan konversi dari kilometer ke meter dan dari meter ke kilometer.

Saat kami memasukkan nilai di dalam salah satu kotak teks, mana pun yang diubah, Tonton akan memperbarui kedua kotak teks tersebut. Kami tidak perlu secara khusus menetapkan acara apa pun dan menunggu hingga berubah dan melakukan pekerjaan ekstra untuk memvalidasi. Watch menangani pembaruan kotak teks dengan penghitungan yang dilakukan di fungsi masing-masing.

Mari kita lihat hasilnya di browser.

Mari masukkan beberapa nilai di kotak teks kilometer dan lihat perubahannya di kotak teks meter dan sebaliknya.

Sekarang mari kita masuk ke dalam kotak teks meter dan melihatnya berubah di kotak teks kilometer. Ini adalah tampilan yang terlihat di browser.