当前位置: 首页 > article >正文

input标签v-model属性失效

 

 问题:input标签v-model属性失效,清空ans, 但是ui上依然显示。 html和js代码

<input @input="onInputChange" class="ans" v-model="ans" auto-focus><input>
	const onInputChange = () => {
		if (ans.value === ques.value) {
			endTime = Date.now();
			ans.value = ""; // 清空了值,但是ui上依然显示
			typemasterCharp[ques.value]
			ques.value = "A";
			startTime = Date.now();
		}
	};

 

 解决方案: 使用nextTike, 注意要import

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted,
		nextTick
	} from "vue";

	const onInputChange = () => {
		if (ans.value === ques.value) {
			endTime = Date.now();
			nextTick(() => {
			            ans.value = ""; // 再次确保 UI 更新
						console.log("已清空");
			        });
			typemasterCharp[ques.value]
			ques.value = "A";
			startTime = Date.now();
		}
	};
<script>

疑惑: 很奇怪的一点是,nextTick()前边再加一句ans.value=""就又失效了,真离谱,如下

	const onInputChange = () => {
		if (ans.value === ques.value) {
			endTime = Date.now();
			// console.log(endTime - startTime);
			// console.log(ans.value);
			ans.value = "";
			nextTick(() => {
			            ans.value = ""; // 再次确保 UI 更新
						console.log("已清空");
			        });
			// console.log("已清空");
			// console.log(ans.value);
			typemasterCharp[ques.value]
			ques.value = "A";
			startTime = Date.now();
		}
	};

 

 


http://www.kler.cn/news/365685.html

相关文章:

  • redis的配置文件解析
  • Lucas带你手撕机器学习——套索回归
  • django5入门【03】新建一个hello界面
  • sql-labs靶场第二十关测试报告
  • 中酱集团:黑松露酱油,天然配方定义健康生活
  • K最近邻算法
  • softmax回归从零实现
  • 怎么压缩ppt大小?压缩PPT文件非常简单的几种方法
  • Python 语法与数据类型详解
  • 易泊车牌识别相机在智慧工地的应用
  • 中间件之Seata
  • 中小企业设备管理效率提升:Spring Boot系统设计
  • 铜业机器人剥片 - SNK施努卡
  • git 修改当前分支的上游分支
  • A survey on instance segmentation: state of the art——论文笔记
  • 基于Springboot+Vue的租房系统(含源码数据库)
  • ISO26262在汽车领域的意义
  • Chunkr: 在线PDF文档解析与OCR工具
  • 认识区块链,认知区块链——DePIN
  • 数据治理与主数据管理:现代企业数据管理的核心
  • 大语言模型推理源码解读(基于llama3模型)
  • 基于docker 部署redis
  • 解决: java.lang.RuntimeException: can not run elasticsearch as root
  • 034 RabbitMQ简介 安装 SpringBoot整合RabbitMQ框架搭建
  • STMicroelectronics意法半导体车规芯片系列--亿配芯城(ICgoodFind)
  • 非接触式竖向位移、水平位移视频实时在线监测的设备分类及选型