豚野郎です。
今回はVue.jsのwatchプロパティについて書いていきます。
functionを書く方法と、functionを省略する方法があります。
参考：https://prograshi.com/language/vue-js/what-are-handler-deep-and-immediate-in-watch/
今回はfunctionを省略した方法を書いていきます。
初回に書いた双方向データバインディングはこちら↓
https://qiita.com/pig_buhi555/items/a3ad0e8f7a13c6d49234
1. 普通に使う場合
watchプロパティはデータの中を監視します。
そのため、データに変化があった時に処理が走ります。
以下の例の場合、sampleとテキストボックスに入力すると
「sampleと入力しています」と表示されます。
js/main.js
(function() {
'use strict';
let vm = new Vue({
el: '#app',
// モデルにデータを保持
data: {
sample: 'test',
},
watch: {
// sampleに何らかの変更があった場合
sample(text) {
if (text == 'sample') {
var sampleText = document.getElementById('sample_text');
sampleText.textContent = 'sampleと入力しています';
}
}
},
});
})();
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app" class="container">
<input type="text" v-model="sample">
{{ sample }}
<div id="sample_text"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="js/main.js"></script>
</body>
</html>
sample(text, old)に第二引数を入れれば、変更前の値を入れることもできます。
(この場合、old)
2. handlerを使う場合
ネストしたデータの変更を検知する際には、以下のように記載します。
(あまりいいサンプルソースではありませんが、お許しください・・・・)
以下の例では、3つのテキストボックスのどれかに「sample」と記載された時に
「sampleと入力しています」と表示されます。
js/main.js
(function() {
'use strict';
let vm = new Vue({
el: '#app',
// モデルにデータを保持
data: {
samples: [
{text: 'sample1'},
{text: 'sample2'},
{text: 'sample3'},
],
},
watch: {
// sampleに何らかの変更があった場合
samples:{
handler(text) {
var sampleText = document.getElementById('sample_text');
if (text[0]['text'] == 'sample' || text[1]['text'] == 'sample' || text[2]['text'] == 'sample') {
sampleText.textContent = 'sampleと入力しています';
} else {
sampleText.textContent = '';
}
},
deep: true
}
},
});
})();
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app" class="container">
<div v-for="(sample, index) in samples">
<input type="text" v-model="sample.text">
{{ sample.text }}
</div>
<div id="sample_text"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="js/main.js"></script>
</body>
</html>
deep: true：ネストされた値の変更も検知します。
immediate: true：初回読み込み時にhandlerが呼ばれます。