こんにちは、あべしんです。
Vue.jsプログラミング学習第7回はwatchについて学んでいきます。
watchとは？
watchは一言でいうと、データの変更を監視するためのプロパティです。
データに変更があった際に、変更前と変更後のデータを引数として受け取り処理が実施されます。
「あるデータが変更された時だけ特定の処理を実施」したい場合などに活躍します！
ソースコードを見ていきましょう！
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.jsプログラミング学習 第7回</title>
</head>
<body>
<div id="app">
<input type="text" v-model="inputData">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
inputData: ""
},
watch: {
inputData: function(newData, oldData) {
console.log("変更後データ：" + newData + " " + "変更前データ：" + oldData);
}
}
})
</script>
</body>
</html>
10行目のinputタグにはv-modelを付けてVueのinputData変数とバインド。
20行目以降がwatchプロパティ部分の記述です。
watchプロパティは第1引数に変更後、第2引数に変更前のデータを受け取り、処理を実行します。
22行目ではconsole.logを使って変更後、変更前のデータをChromeのConsoleに出力するようにしています。
それでは実行してみましょう！
実行結果
ちょっと見づらいかもしれませんが、、、
入力フォームに文字を入力するたびに、変更後と変更前のデータが変わっていくことが分かります。
(文字を消した場合も同じですね)
このように、データが変更されるたびに処理が実行されることで、データの変更を監視することが可能になります。
今回はConsoleにログを出力する処理だけですが、他の処理を組み込んでデータ変更をトリガーにいろいろ遊んでみましょう。
今日はここまで！
第8回は、今まで学んだものを使った簡単なおみくじプログラムの作成です。
コメント