Vue.js
ウォッチャー
サーチ…
使い方
任意のVueインスタンスのデータプロパティを見ることができます。プロパティを見ているときに、変更に関するメソッドをトリガーします:
export default {
data () {
return {
watched: 'Hello World'
}
},
watch: {
'watched' () {
console.log('The watched property has changed')
}
}
}
古い値と新しい値を取得することができます:
export default {
data () {
return {
watched: 'Hello World'
}
},
watch: {
'watched' (value, oldValue) {
console.log(oldValue) // Hello World
console.log(value) // ByeBye World
}
},
mounted () {
this.watched = 'ByeBye World'
}
}
オブジェクトのネストされたプロパティを監視する必要がある場合は、 deep
プロパティを使用する必要があります。
export default {
data () {
return {
someObject: {
message: 'Hello World'
}
}
},
watch: {
'someObject': {
deep: true,
handler (value, oldValue) {
console.log('Something changed in someObject')
}
}
}
}
データはいつ更新されますか?
オブジェクトに新しい変更を加える前にウォッチャをトリガする必要がある場合は、 nextTick()
メソッドを使用する必要があります。
export default {
data() {
return {
foo: 'bar',
message: 'from data'
}
},
methods: {
action () {
this.foo = 'changed'
// If you juste this.message = 'from method' here, the watcher is executed after.
this.$nextTick(() => {
this.message = 'from method'
})
}
},
watch: {
foo () {
this.message = 'from watcher'
}
}
}
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow