Blog Address
PrefaceWhen I was using form validate in Vue, I found sometimes vue doesn"t render data which was modified by me. I even thought it was a bug. Anyway, let"s take a look.
MainHere is a simple demo:
html, body { width: 100%; height: 100%; } .app { width: 100%; height: 100%; }
let app = new Vue({ el: "#app", data: { positiveNumTip: "please enter a positive num", positiveNum: "", positiveNumResTip: "validated and modified result: " }, methods: { oldValidate(event) { let value = event.target.value let reg = /^[d]+[.]?[d]*$/ let newVal = Number.parseFloat(value) if (!value.match(reg)) { if (!isNaN(newVal) || newVal > 0) { this.positiveNum = newVal } else { this.positiveNum = 1 } } else { this.positiveNum = value } } } })
When I was pressing _ffffdffffdffffdd_, what did I got?
The first letter was replaced to 1 but the others not. And the most important is the result I got is always 1 which means this.positiveNum is 1 while the value in the input is not 1.
Why?
I even thought it was a bug until one day I met a similar problem which was solved in SO.
The key is the Lifecycle. The guide mentions it before but I didn"t understand it until now. Let"s see the picture again:
See?
The first time we change positiveNum to 1 and then we always change positiveNum to 1. So, vue wouldn"t re-render because the data doesn"t change. So, the connection between input and positiveNum was cut off until positiveNum isn"t equal to 1.
We can add updated to see how many times data has changed:
let app = new Vue({ el: "#app", data: { positiveNumTip: "please enter a positive num", positiveNum: "", positiveNumResTip: "validated and modified result: " }, methods: { oldValidate(event) { let value = event.target.value let reg = /^[d]+[.]?[d]*$/ let newVal = Number.parseFloat(value) if (!value.match(reg)) { if (!isNaN(newVal) || newVal > 0) { this.positiveNum = newVal } else { this.positiveNum = 1 } } else { this.positiveNum = value } } }, updated() { console.log("data updated") //only triggered once } })
As explained before, you can only see "data updated" once.
So, how can we solved this problem?
The key is still the Lifecycle. Vue wouldn"t re-render because data doesn"t change. So, we can update data after data has been changed and rendered. Understood? See code below:
let app = new Vue({ el: "#app", data: { positiveNumTip: "please enter a positive num", positiveNum: "", positiveNumResTip: "validated and modified result: " }, methods: { oldValidate(event) { let value = event.target.value let reg = /^[d]+[.]?[d]*$/ let newVal = Number.parseFloat(value) if (!value.match(reg)) { if (!isNaN(newVal) || newVal > 0) { this.positiveNum = newVal } else { this.positiveNum = 1 } } else { this.positiveNum = value } }, newValidate(event) { let value = event.target.value let reg = /^[d]+[.]?[d]*$/ this.positiveNum = value this.$nextTick(() => { if (!this.positiveNum.match(reg)) { let newVal = Number.parseFloat(this.positiveNum) if (!isNaN(newVal) || newVal > 0) { this.positiveNum = newVal } else { this.positiveNum = "" //for better use I changed the wrong value to "" } } }) } }, updated() { console.log("data updated") } })
See? I move the origin logic to the this.$nextTick(callback). Every time you press the wrong button, it will pass the wrong value to positiveNum and will be corrected in this.$nextTick(callback) which will make the logic run correctly. Also, you can see the updated log at the console.
Ending Referencechange child-component checked state from parent-component synchronously fail
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108820.html
摘要:與大多數全局對象不同,沒有構造函數。為什么要設計更加有用的返回值早期寫法寫法函數式操作早期寫法寫法可變參數形式的構造函數一般寫法寫法當然還有很多,大家可以自行到上查看什么是代理設計模式代理模式,為其他對象提供一種代理以控制對這個對象的訪問。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第 19 篇。 如果你錯過了前面的章節,可以在這里找到它們: 想閱讀更多優質文章請...
摘要:寫在前面這篇文章講述了如何利用和實現雙向數據綁定,個人系早期玩家,寫這個小框架的時候也沒有參考等源代碼,之前了解過其他實現,但沒有直接參考其他代碼,如有雷同,純屬巧合。我們同時也應該支持事件機制,這里我們以最常用的方法作為例子實現。 寫在前面:這篇文章講述了如何利用Proxy和Reflect實現雙向數據綁定,個人系Vue早期玩家,寫這個小框架的時候也沒有參考Vue等源代碼,之前了解過其...
摘要:寫在前面這篇文章講述了如何利用和實現雙向數據綁定,個人系早期玩家,寫這個小框架的時候也沒有參考等源代碼,之前了解過其他實現,但沒有直接參考其他代碼,如有雷同,純屬巧合。我們同時也應該支持事件機制,這里我們以最常用的方法作為例子實現。 寫在前面:這篇文章講述了如何利用Proxy和Reflect實現雙向數據綁定,個人系Vue早期玩家,寫這個小框架的時候也沒有參考Vue等源代碼,之前了解過其...
摘要:以下內容根據部分速記。同時,需要在父組件標簽中添加這個屬性,該屬性才能傳遞到子組件內。把父組件傳遞的數據當做子組件的初始值。 以下內容根據Vue.js Guide Essentials部分速記。 不含動畫/mixin/SSR/路由/狀態管理等部分. Introduction 建議閱讀原文 https://vuejs.org/v2/guide/in... 什么是Vue 開始 聲明式...
閱讀 1756·2021-11-24 09:39
閱讀 1686·2021-11-22 15:22
閱讀 1002·2021-09-27 13:36
閱讀 3230·2021-09-24 10:34
閱讀 3329·2021-07-26 23:38
閱讀 2633·2019-08-29 16:44
閱讀 974·2019-08-29 16:39
閱讀 1104·2019-08-29 16:20