鍍金池/ 問答/HTML5  HTML/ 在vue中 input的v-model和computed一起使用出現(xiàn)問題

在vue中 input的v-model和computed一起使用出現(xiàn)問題

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滿足我的正則情況下，注冊(cè)按鈕才高亮 并且可點(diǎn)擊
我使用computed返回這個(gè)值，但似乎在return這里綁定了多個(gè)屬性后，就判斷錯(cuò)誤了。請(qǐng)問是什么原因呢

clipboard.png

現(xiàn)在我將computed改為這個(gè)后，還是沒能達(dá)到預(yù)期的效果，尤其是在輸入確認(rèn)密碼isPassword的時(shí)候，這個(gè)isRigster都沒有執(zhí)行 是為什么呢。

通過大佬的指點(diǎn)。發(fā)現(xiàn)不寫在return里面的話，是可以實(shí)現(xiàn)效果的。但是現(xiàn)在如果用戶是先輸入密碼，再輸入手機(jī)號(hào)，結(jié)果就通不過了。請(qǐng)問這是怎么回事啊。代碼如下

clipboard.png

按照大佬的寫法 打印了一下發(fā)現(xiàn) 當(dāng)我正確填寫好信息后，然后修改信息，全部變?yōu)閒alse了

clipboard.png這是正確的

然后刪掉一個(gè)密碼

clipboard.png

在寫了一個(gè)demo后 發(fā)現(xiàn)一個(gè)問題。

clipboard.png

代碼如上，當(dāng)三個(gè)輸入都正確后 有竟然不是都為true

clipboard.png

中間這個(gè)怎么都不為true

回答
編輯回答
舊酒館

let {tel,password,msgYZM} = this.reg
tel,password,msgYZM的值都沒變，所以執(zhí)行一次后就不會(huì)在執(zhí)行return的內(nèi)容

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
    }
}
2018年4月29日 17:48
編輯回答
風(fēng)清揚(yáng)

光從你的這幾行代碼也看不出錯(cuò)誤出在哪，建議你把那些條件在 return 前打印一下，看一看結(jié)果和自己預(yù)期的一樣不一樣。
仔細(xì)排查一下自己的錯(cuò)誤。

2018年5月9日 18:55