Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

vue.js 2.x その0009 watchで配列(array)や連想配列(object)を監視する

参考にさせて頂いたページ

サンプルコード

連想配列のObjectを丸ごと監視したい場合は、処理はhandler: function(){},の方に記述して、deep: true,が必要です。
連想配列のObjectを個々に監視したい場合は、watchのキーをクォーテーションで囲って'individuallyObj.aaa'のようにします。

<div id="vue-app">
  <h2>シンプル</h2>
  <input type="text" v-model="hoge">

  <h2>配列</h2>
  <input type="text" v-model="hogeArr[0]">
  <input type="text" v-model="hogeArr[1]">
  <input type="text" v-model="hogeArr[2]">

  <h2>連想配列 丸ごと</h2>
  <input type="text" v-model="hogeObj.aaa">
  <input type="text" v-model="hogeObj.bbb">

  <h2>連想配列 個々</h2>
  <input type="text" v-model="individuallyObj.aaa">
  <input type="text" v-model="individuallyObj.bbb">
</div>

<script src="js/vue.js"></script>
<script>
  new Vue({
    el: '#vue-app',
    data: {
      hoge: 'str',
      hogeArr: [
        'arr-0',
        'arr-1',
        'arr-2',
      ],
      hogeObj: {
        aaa: 'obj-aaa',
        bbb: 'obj-bbb',
      },
      individuallyObj: {
        aaa: 'object個々に監視aaa',
        bbb: 'object個々に監視bbb',
      },
    },
    watch: {
      hoge: function(val){
        console.log(val);
      },
      hogeArr: function(val){
        console.log(val);
      },
      hogeObj: {
        handler: function(val){
          console.log(val);
          console.log(val.aaa);
          console.log(val.bbb);
        },
        deep: true,
      },
      'individuallyObj.aaa': function(val){
        console.log(val);
      },
      'individuallyObj.bbb': function(val){
        console.log(val);
      },
    },
  });
</script>