Vue强制刷新视图问题
最近在学习使用vue,编写H5,遇到了一个比较奇特的问题,
现象大致就是,我需要对一个输入字符串进行Format操作,然后Format之后,这个值和修改前的值是相同的,控件代码<input type="text" :placeholder="$t('input_device_code_placeholder')" v-model="deviceCode" @input="inputing_deviceCode"/>
举例:输入为1111-2222,我手动把中间的【-】删除,删除后会自动进行Format处理,
处理后的值为1111-2222,并且赋值回去,理论上应该页面上显示的就是1111-2222,但是神奇的事情发生了,页面上显示的11112222,debug的值确实是1111-2222
后来查到原来是因为view层的渲染逻辑会判断上次的值和这次的值一样的时候,不会更新视图。
然后网上找了很多,都是说用this.$set(target,key,value)
,this.$forceUpdate
,可是用了都无效。
最终是用this.$nextTick(() => { this.deviceCode = code })
才实现了功能。
大家如果有更好的意见,可以告诉我,刚学vue,啥都不懂。