vue v-model双向绑定有两种状态的输入框（待填坑寻求更优解

最新推荐文章于 2023-05-11 17:33:54 发布

Lioner-CSU

最新推荐文章于 2023-05-11 17:33:54 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue v-model watch

本文链接：https://blog.csdn.net/qq_35630674/article/details/101026738

版权

vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

、

由于想实现上述的效果，当勾选checkbox时，法人姓名/法人手机号 v-model绑定联系人/手机号，

取消勾选时，v-model绑定不相同的法人姓名和手机号

最开始查阅资料，想让v-model绑定一个动态变量或者计算属性

但是计算属性的话，只有联系人/手机号变动时（移开焦点 trigger：blur），才会触发计算

想要一直监听，让下面随上面变化，得使用watch

v-model和watch结合的方法：

<el-form-item label="法人姓名" prop="legalPerson">
  <el-input v-model.trim="orderForm.legalPerson" placeholder="请输入法人姓名" :disabled="orderForm.isSame"></el-input>
  <el-checkbox label="法人与经办人一致" v-model="orderForm.isSame" @change="checkSame"></el-checkbox>
</el-form-item>
<el-form-item label="法人手机号" prop="legalPersonMobile">
  <el-input v-model="orderForm.legalPersonMobile" placeholder="请输入法人手机号" :disabled="orderForm.isSame"></el-input>
</el-form-item>

watch是保证，勾选了以后，下面属性的值会随上面的值实时变动

    watch: {
        'orderForm.contact': function () {
            if(this.isSame === true){
              this.orderForm.legalPerson = this.orderForm.contact
            }
        },
        'orderForm.mobile': function () {
            if(this.isSame === true){
              this.orderForm.legalPersonMobile = this.orderForm.mobile
            }
        }
    },

还需要这个点击事件是保证，如果上面的属性输入完成了以后点击选项框，能够让属性直接copy到下面

        checkSame () {
          this.isSame = !this.isSame
          if(this.isSame === false){
            this.orderForm.legalPerson = ""
            this.orderForm.legalPersonMobile = ""
          }else{
            this.orderForm.legalPerson = this.orderForm.contact
            this.orderForm.legalPersonMobile = this.orderForm.mobile
          }
        },