小程序修改v-model值后调用@input，重新赋值并不会修改视图BUG

最新推荐文章于 2024-06-17 17:31:08 发布

Technology_hands

最新推荐文章于 2024-06-17 17:31:08 发布

阅读量469

点赞数

文章标签： bug java 开发语言

本文链接：https://blog.csdn.net/technology_hands/article/details/130964328

版权

文章讨论了在Vue中使用v-model和input事件时，如何正确处理输入值的限制。通过this.$nextTick确保在所有异步事件之后更新newName的值，以解决视图未同步更新的问题。如果不使用$nextTick，输入值可能会超过预期的限制。

摘要由CSDN通过智能技术生成

啊不想通过Input的 maxlenght 来控制长度，而是通过@Input ，如果我们不加this.$nextTick(() => {
那么，那么导致v-model="newName" 的值确实被我限制在了4个，但是视图并没有发生变化，会越写越多，但是如果我加上了this.$nextTick(() => {

<input placeholder="请输入名称" v-model="newName" cursor-spacing="500rpx" id="name" @input="inputChange" />

inputChange(e, type) {
				let text = e.detail.value.trim()
				console.log('text222', text)
				if (e.currentTarget.id == 'name') {
					// 为什么需要这个？ 因为你改了this.newName 这个值再去改E是一个异步事件  在这个异步事件之前已经调用了下一个inputChange
					// 此时赋的值还是之前的值  而使用了$nextTick  可以确保这个方法在所有异步事件之后调用 就可以获取最新的值了
					this.$nextTick(() => {
						this.newName = text.length > 4 ? text.substring(0, 4) : text
					})

那么就正常了，那么为什么会这样呢？

因为

因为你改了this.newName 这个值再去改E（input标签里面的@input事件）是一个异步事件在这个异步事件之前已经调用了下一个inputChange，此时赋的值还是之前的值而使用了$nextTick 可以确保这个方法在所有异步事件之后调用就可以获取最新的值了