Vue开发中遇到的坑
今天开发vue的时候,遇到了坑,现总结如下:
我在data里初始化了一个对象,然后,想要watch到对象的内部属性?
data:function(){
return {
form:{
name:''
}
}
},
<input type="text" v-model="form.name">
具体代码如上,比如,我现在想要watch form.name这个属性值,当我像之前那样写的时候,直接语法报错!!!!
watch:{
form.name(){}
}
所以,找到了如下的解决办法!!!!敲重点!!!!
-
解决一
watch:{ form:{ handler(){ console.log(this.form.name) }, deep:true } }
-
解决二
watch: { 'form.name': { handler: function() { //do something }, } }
-
解决三
computed: { name: function() { return this.form.name } } watch: { name: { handler: function() { //do something }, } } //因为不能直接watch到对象(引用类型)的内部属性,所以利用计算属性,和中间变量解决