変更VUEモニタ配列やオブジェクトと

デモコード、最初の増加の配列やオブジェクトを見てください。

<テンプレート>
  <div>
    <P>これは配列の私の定義</ P>
    <DIV> {{this.arr}} </ div>
    <ボタン@クリック=「changeArr」>こちらをクリックして、私は最初の配列を変更するつもりです。</ボタン>
    <P>これが私の目標です。</ P>
    <DIV> {{this.haha}} </ div>
    <ボタン@クリック=「changeObj」>私は、オブジェクトのプロパティを追加するつもりだここをクリックして</ button>の
  </ div>
</テンプレート>

<スクリプト>
輸出のデフォルト{
  名前：「テスト」、
  データ（）{
    {戻ります
      ARR：[0、1、2、3、4、5、6]、
      笑：{
        名前： "123"、
        年齢：12、
        物語：「丘の上に一度」    
      }
    }。
  }、
  時計：{
     'ARR'：{
         ハンドラ：関数（ヴァル、OLDVAL）{
            console.log（ '修飾前' '修飾'、ヴァル、OLDVAL）。
         }、   
     }、
     '母'：{
         ハンドラ：関数（ヴァル、OLDVAL）{
            console.log（ '修飾前' '修飾'、ヴァル、OLDVAL）。
         }
     }
  }、
 
  方法：{
    changeArr（）{
      this.arr.push（ '12332'）//配列を追加します。
      console.log（this.arr「これは改正後の配列です」）。
    
    }、
    changeObj（）{
      this.haha.content =「私は若い僧侶でした」; //オブジェクトを追加します
      console.log（「これは改正オブジェクトの後で」、this.haha）。    
    }
  }
}。
</ SCRIPT>

　　

このように、配列の増加を監視するために見て、（変更されていないデータビューでを聞いていない）増加目標を聞いていません

次いで、配列オブジェクト（変更されたオブジェクトの値）を変更します

changeArr（）{
      this.arr [0] = 1232 //配列を変更します
      console.log（this.arr「これは改正後の配列です」）。
    
    }、
    changeObj（）{
      this.haha.story =「私は若い僧侶だった」; //オブジェクトの値を変更します
      console.log（「これは改正オブジェクトの後で」、this.haha）。    
    }