Vue.jsのwatchプロパティ(監視プロパティ)

この記事では、Vue.jsのwatchプロパティ(監視プロパティ)を説明します。watchを介してデータの変更に対して反応します。

次の例では、watchを使用してカウントを実装しています。

例

<div id = "app">
 <p style = "font-size:25px;">カウント: {{ counter }}</p>
 <button @click = "counter++" style = "font-size:25px;">ここにクリックしてください</button>
</div>
<script type = "text/javascript">
 var vm = new Vue({
    el: '#app',
    data: {
       counter: 1
    }
 });
 vm.$watch('counter', function(nval, oval) {
    alert('カウンター値の変化 :' + oval + ' は ' + nval + 'になります!');
 });
</script>

次の例では、キロメートルとメートルの間で換算します。

例

  <div id = "computed_props">
     千米 : <input type = "text" v-model = "kilometers">
     米 : <input type = "text" v-model = "meters">
  </div>
   <p id="info"></p>
  <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 = this.kilometers * 1000
           },
           meters : function (val) {
              this.kilometers = val/ 1000;
              this.meters = val;
           }
        }
     });
     // $watch はインスタンスメソッドです
    vm.$watch('kilometers', function (newValue, oldValue) {
        // このコールバックは vm.kilometers が換算された後に呼び出されます
        document.getElementById ("info").innerHTML = "換算前の値: " + oldValue + "，換算後の値: " + newValue;
    })
  </script>

上記のコードで2つの入力ボックスを作成しました。dataプロパティ(属性)では、キロメートルとメートルの初期値は両方とも0です。 watchオブジェクトは、キロメートルとメートルの2つのメソッドを作成します。

入力ボックスにデータを入力すると、watchはデータの変換をリアルタイムで監視し、その値を換算します。