VueJS - Özelliği İzle

Bu bölümde Watch özelliği hakkında bilgi edineceğiz. Bir örnek kullanarak, Watch özelliğini VueJS'de kullanabileceğimizi göreceğiz.

Misal

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

Yukarıdaki kodda, biri ile iki metin kutusu oluşturduk. kilometers ve bir başkasıyla meters. Veri özelliğinde kilometre ve metre sıfırlanır. İki işlevle oluşturulmuş bir izleme nesnesi vardır.kilometers ve meters. Her iki fonksiyonda da kilometreden metreye ve metreden kilometreye dönüşüm yapılır.

Metin kutularının herhangi birine değer girerken, hangisi değiştirilirse değiştirilsin, Watch her iki metin kutusunu da günceller. Herhangi bir olayı özel olarak atamamız ve değişmesini beklememiz ve ek doğrulama işini yapmamız gerekmiyor. Watch, ilgili işlevlerde yapılan hesaplama ile metin kutularını güncellemeye özen gösterir.

Tarayıcıdaki çıktıya bir göz atalım.