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);
}
}
}
}vuejs set
Vue.set(vm.someObject, 'propertyName', value)
// Or using alias
this.$set(this.someObject, 'propertyName', value)
// For an array, simply repalce propertyName with the index
this.$set(this.someArray, indexOfItem, value)
// Or assign new props to an object
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })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
}
}
})computed vue
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...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
}
},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
