首页 > 其他分享 >vue中input触发方法中调用ajax,导致input失去焦点问题

vue中input触发方法中调用ajax,导致input失去焦点问题

时间:2023-03-02 13:55:58浏览次数:43  
标签:vue 聚焦 ajax 调用 input 方法

发现在vue中监控input绑定的值,调用方法时,如果方法中有调用后端接口(使用Ajax),会导致input输入框失去焦点,这样导致的问题就是每输入一个字符,就要重新聚焦一次,可通过以下方式在方法中重新聚焦:

在input上添加ref

 

 然后在方法末尾添加focus方法重新聚焦

 

标签:vue,聚焦,ajax,调用,input,方法
From: https://www.cnblogs.com/lumingprince/p/17171545.html

相关文章

  • vue 纵向滑动模块
    代码<template><div><!--左侧的滑动模块--><divclass="scroll-box":style="{width:410.7*screenWidth/1920+'px',height:730......
  • vue横向滑动
    代码 <template><div><!--左侧的滑动模块--><divclass="scroll-box":style="{width:1106*screenWidth/1920+'px',height:33......
  • 基于vue3+el-upload 获取视频第一帧截图并上传服务器
    //视频上传成功consthandleVideoSuccess:UploadProps['onSuccess']=(response,uploadFile)=>{  if(response.status=='500005'){   detailInfo.v......
  • 学习vue3遇到的问题
    1.toReftoRef是用来给抽离响应式对象(被reactive包裹的对象)中的某一个属性的,并且把这个属性包裹成ref对象,使其和原对象产生链接。或许有人就回有人有疑问了?这个toRef存在......
  • Tf2 ValueError: A merge layer should be called on a list of inputs
    Tf2ValueError:Amergelayershouldbecalledonalistofinputs问题描述最近遇到了一个tensorflow的问题,在load已经save下来的模型的时候,发生了报错:/opt/conda/l......
  • vue真实项目结构
    我明白你的需求。如果你想看一个真实企业项目使用的复杂目录结构,你可以参考以下几个例子:根据1的介绍,一个vue项目的目录结构可以细分为以下几个部分:|-src||-api存......
  • docker vue dist 部署
    1.准备vue打包后的dist2.部署docker 1.准备vue打包后的dista:1个dist目录;1个Dockerfile文件。内容如下:FROMnginxCOPYdist//usr/share/nginx/html/ 说明:自动......
  • vue3 门户网站搭建6-wangeditor
    门户网站的新闻、公告等文章,内容可配置,故引入wagneditor 1、安装:npmi wangeditor 2、方便调用,抽成组件:<template><divref='editor'></div></template><......
  • VUE前端请求跨域问题解决
    解决方法:vue.config.js文件配置:module.exports={devServer:{open:true,host:'192.168.1.193',port:8080,https:fals......
  • 路飞:路飞前端全局css,全局配置文件、配置axios实现前后台交互、安装vue-cookies、安装e
    目录一、路飞前端全局css,全局配置文件1.1整理项目1.2设置全局css1.3配置全局js二、配置axios实现前后台交互三、安装vue-cookies四、安装elementui五、安装bootstrap和j......