vue watch deep
export default {
name: 'ColorChange',
props: {
colors: {
type: Array,
required: true,
},
},
watch: {
colors: {
// This will let Vue know to look inside the array
deep: true,
// We have to move our method to a handler field
handler(value) {
console.log('The list of colors has changed!', value);
}
}
}
}vue watch props
new Vue({
el: '#app',
data: {
text: 'Hello'
},
components: {
'child' : {
template: `<p>{{ myprop }}</p>`,
props: ['myprop'],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
}
}
}
}
});vue watch
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})vue computed
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})vue watch
watch: {
// whenever question changes, this function will run
question(newQuestion, oldQuestion) {
// your code
}
},vue add watcher
vm.$watch('person.name.firstName', function(newValue, oldValue) {
alert('First name changed from ' + oldValue + ' to ' + newValue + '!');
});Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
