読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

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

制作 vuejs javascript

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

サンプルコード

連想配列のObjectを監視したい場合は、処理はhandler: function(){},の方に記述して、deep: true,が必要です。

<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">
</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',
      },
    },
    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,
      },
    },
  });
</script>