ウォッチャ

データの変更を監視する

ウォッチャはデータの変更を監視してくれる機能です。
監視したいデータとデータが変更されたときに実行したいハンドラを予め登録しておくと、データの変更をVueが検知してハンドラを呼び出します。

ウォッチャ登録

HTML

<div id="app">
<template v-if="stock >= 1">
  <span class="num">在庫はあと{{stock}}個</span>
  <button class="btn" v-on:click="onDeleteItem">削除ボタン</button>
</template>
{{message}}
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    stock: 9
  },
  methods: {
    onDeleteItem: function() {
      this.stock--;
    }
  },
  watch: {
    stock: function(newStock, oldStock) {
      if (newStock == 0) {
        this.message = '売り切れ！！';
      }
    }
  }
});

ウォッチャで算出プロパティを監視する

HTML

<div id="app2">
<template v-if="stock >= 1">
  <span class="num">在庫はあと{{stock}}個</span>
  <button class="btn" v-on:click="onDeleteItem">削除ボタン</button>
</template>
{{statusMesseage}}
</div>

JavaScript

var app2 = new Vue({
  el: '#app2',
  data: {
    message: '',
    stock: 10
  },
  methods: {
    onDeleteItem: function () {
      this.stock--;
    }
  },
  computed: {
    statusMesseage: function () {
      if (this.stock == 0) {
        return '売り切れです';
      }
      return '';
    }
  },
  watch: {
    statusMesseage: function () {
      console.log('商品のステータスが変化しました。');
    }
  }
});