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

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.mrgr.cn/news/56584.html

相关文章:

  • TwinCAT3下位机配置EAP通讯传递与接收变量
  • 2024-10-18 学习人工智能的Day10
  • ASP.NET Core8.0学习笔记(二十一)——EFCore关系配置API
  • 深入理解Spring框架几个重要扩展接口
  • 【LaTeX和Word版】写论文时如何调整公式和文字的间距
  • Qt中的Base64编码
  • 信发软件之展示excel文档——未来之窗行业应用跨平台架构
  • 图像处理学习笔记-20241021
  • Ubuntu配置FTP
  • eCAP超声波测距-ePWM电机调速
  • 影刀RPA实战:网页爬虫之我爱听评书
  • 数据结构 - 树,三探之代码实现
  • 如何看待AI技术的应用前景?
  • AI处理图片和视频的网址
  • 帝国CMS – AutoTitlePic 自动生成文章标题图片插件
  • ARL 灯塔 | ARL 灯塔 — 字典替换
  • 路径参数和post请求方式在请求资源时如何选择------各自的优势和使用场景比较
  • 基于深度学习的声纹识别
  • 进销存平板展示系统——未来之窗行业应用跨平台架构
  • 要让AI(任何一款绘图AI)把一个己有风格的图片画到一个实物商品上的窍门
  • 压缩感知方法——基础追踪(Basis Pursuit, BP)方法详解
  • 逐行讲解大模型生成解码超参数源码(temperature、top-k、top-p等)
  • 了解Scala的多态概述的定义,作用以及优点
  • 7.hyperf安装【Docker】
  • C语言(十六)函数综合(二)递归 --- 辩论赛经验谈
  • vite.config.js配置路径别名@