vue中v-model使用计算属性,双向绑定失效

在vue中v-model绑定了一个值到val中,用到了计算属性监测val的变化,但是使用了computed之后,v-model的双向绑定失效

<div class = "flex f7" style = "width: 0" v-if="isIos || isAndroid">
    <input class = "f7" type = "text" v-model = "getAddress" :placeholder = "$t('withdraw.adsToast')"/>
          
     <div class = "f1 img-cont" @click = "scan()">
         <img src = "../../assets/img/ic-withdrawAds.png"
                 class = "ic-ads"/>
      </div>
 </div>
computed: {
      getAddress() {
        if(this.$store.state.updateAddress){
          this.address = this.$store.state.updateAddress
        }
        return this.$store.state.updateAddress;
      },
    },

输入地址之后再输入下面其他input值,地址值变为空,打印this.address为空

后来在计算属性中加入get和set解决了双向绑定问题

computed: {
      getAddress: {
        get: function () {
          if(this.$store.state.updateAddress){
            this.address = this.$store.state.updateAddress
          }
          return this.address
        },
        set: function (value) {
          this.address = value
        },
      },
    },

 

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值