在vue中 input的v-model和computed一起使用出现问题

computed:{

    isRigster(){
        let {tel,password,msgYZM} = this.reg
        return tel.test(this.telephone) && password.test(this.password) && this.password === this.isPassword && msgYZM.test(this.msgYZM)
    }
}

clipboard.png

需求是 在所有的input满足我的正则情况下,注册按钮才高亮 并且可点击
我使用computed返回这个值,但似乎在return这里绑定了多个属性后,就判断错误了。请问是什么原因呢

clipboard.png

现在我将computed改为这个后,还是没能达到预期的效果,尤其是在输入确认密码isPassword的时候,这个isRigster都没有执行 是为什么呢。

通过大佬的指点。发现不写在return里面的话,是可以实现效果的。但是现在如果用户是先输入密码,再输入手机号,结果就通不过了。请问这是怎么回事啊。代码如下

clipboard.png


按照大佬的写法 打印了一下发现 当我正确填写好信息后,然后修改信息,全部变为false了

clipboard.png这是正确的

然后删掉一个密码

clipboard.png





在写了一个demo后 发现一个问题。

clipboard.png

代码如上,当三个输入都正确后 有竟然不是都为true

clipboard.png

中间这个怎么都不为true

阅读 3k
2 个回答

let {tel,password,msgYZM} = this.reg
tel,password,msgYZM的值都没变,所以执行一次后就不会在执行return的内容

computed: {
    isRigster () {
        let {regT, regP, regM} = this.reg
        let isT = regT.test(this.telephone)
        let isP = regP.test(this.password)
        let isM = regM.test(this.msgYZM)
        let isPSame = this.password === this.isPassword
        return isT && isP && isM && isPSame
    }
}

光从你的这几行代码也看不出错误出在哪,建议你把那些条件在 return 前打印一下,看一看结果和自己预期的一样不一样。
仔细排查一下自己的错误。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题