vue watch深度监听对象,实现数据联动

时间:2024-07-25 19:07:44

vue watch深度监听对象,实现数据联动

当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值

 <template>

   <input type="text" v-model="a.a1.a12"/>{{a.a1.a12}}

   <input type="text" v-model="a.a2.a22"/>{{a.a2.a22}}

 </template>

 <script>

   data(){

     retrun{

       a:{

         a1:{

           a12:12

         },

         a2:{

           a22:15

         }

       }

   },

   watch:{

     a:{

       handler(val.oldval){

         if(val.a1.a12<val.a2.a22){

           val.a2.a22=val.a1.a12;

         }

       },

       deep:true

     }

   }

 </script>