1、基本用法, watch 的方法默认是不会执行的,只有当监听数据变化,才会执行。通过声明 immediate 选项为 true,可以立即执行一次 handler。
<template>
<div>
<el-input v-model="demo"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: '',
value: ''
};
},
watch: {
demo(val) {
this.value = this.demo;
}
}
};
</script>
<template>
<div>
<el-input v-model="demo"></el-input>
{{value}}
</div>
</template>
<script>
export default {
name: 'index',
data() {
return {
demo: '',
value: ''
};
},
watch: {
demo: {
handler(newval, oldval) {
this.value = this.newval;
},
immediate: true
}
}
};
</script>
2、对象属性监听,一种是对某个属性的监听,另一种是对整个对象监听
watch: {
'form.apply_amount': {
handler(newVal, oldVal) {
this.form.apply_amount_zh = digitUppercase(newVal)
if (this.tableData1.length > 0) {
this.tableData1[this.tableData1.length - 1].money2 = newVal
}
$('.date_in').text(newVal)
$('.digitUppercase').text(digitUppercase(newVal))
},
immediate: true
},
'form.imprest_apply_name': {
handler(newVal, oldVal) {
$('.imprest_apply_name').text(newVal)
},
immediate: true
},
tableData1: {
handler(newVal, oldVal) {
let newData = deepClone(newVal)
newData.forEach(item => {
item.money = item.money2
delete item.edit
delete item.money1
delete item.money2
delete item.num
delete item.community_name
})
this.tableData = newData
},
deep: true
}
},