vue watch放到created后面,在加载数据渲染数据完成之后使用

之前是这样写的

  watch:{   //watch()监听某个值(双向绑定)的变化,从而达到change事件监听的效果
        user:{
          handler:function(){
            let _this = this;
            let _sum = 10; //用户姓名字体限制为10个
            _this.$refs.userName.setAttribute("maxlength",_sum);
            _this.number= _sum- _this.$refs.userName.value.length;

          },
          deep:true
        }
      },

之后项目中需要的watch的数据用到了v-if(之后加的) 一直报错 因为v-else是数据渲染以后 我才能找到_this.$refs.userName 所以一直报错

  <van-loading v-if="dataLoading" />
      <div v-else class="edit-content">
        <van-cell-group>
          <!--<van-field v-model.trim="user.name" @blur="checkUserName" placeholder="请输入用户名" />-->

          <div class="van-cell van-field">
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body"><input type="text"  v-model.trim="user.name" @blur="checkUserName"  placeholder="请输入用户名" ref="userName" class="van-field__control">
              </div>
            </div>
          </div>

        </van-cell-group>
  </div>     

之后参考这个博客 https://blog.csdn.net/qingwazange/article/details/75507029
改成这个样子,created是渲染数据的

 created(){
        const Vthis = this
        let flag = Vthis.getId()
        if(!flag){
          Toast('系统错误');
          return
        }
        Vthis.getDetail()

      },
      mounted(){
        const Vthis = this
        Vthis.$watch('user', function(){
          let _sum = 10; //用户姓名字体限制为10个
          Vthis.$refs.userName.setAttribute("maxlength",_sum);
          Vthis.number= _sum- Vthis.$refs.userName.value.length;
        }, {deep: true})
      },
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值