【vue】input输入完值后请求后端接口

àì夳堔傛蜴生んèń 2023-09-23 14:50 70阅读 0赞

### 需求： ###

将普通输入框改为输入数据后调用后端接口查询数据，在展示到页面上

### 核心代码： ###

<el-input v-model="sfzhm" clearable placeholder="请输入身份证号查找"></el-input>

return {
        
        sfzhm: null,
        // 后端接口的入参
          baseForm: {
        
            zjhm:"",
            ryzt: "",
            lzrq:"",
            zzryzp: ""
          },
    }

Vue提供了一个watch方法去监听某些data内的数据变动，从而触发相应的操作，当需要在数据变化时执行异步或开销较大的操作时，watch方法是最有用的

watch:{
        
        sfzhm(curVal, oldVal) {
        
          console.log("curVal:",curVal)
      // 实现input连续输入，只发一次请求
          clearTimeout(this.timeout)
          this.timeout = setTimeout(() => {
        
            console.log("sfzhm:",this.sfzhm)
            if(this.sfzhm != ''){
        
              //为调用后端接口赋值  
              this.queryForm.zjhm = this.sfzhm
              console.log("baseForm.zjhm:",this.queryForm.zjhm)
              this.queryOne()
            }
          }, 1000)
        }
      }

//后端接口
        async queryOne(){
        
          this.$nextTick(() => {
        
            const params = {
         ...this.queryForm }
            console.log("params",params)
            informationApi.queryOne(params).then((res) => {
        
            console.log("获取后端数据", res.map.data)
            this.baseForm = res.map.data
            this.tableData = res.map.data.jlxx
            if(this.baseForm.zjhm != null){
        
              this.sfzhm = this.baseForm.zjhm
              this.files[0] = res.map.data.zzryzp
            }else{
        
              this.$message.error("您输入的信息不存在！")
            }
          })
        })
      }

参考链接：[https://blog.csdn.net/tangkthh/article/details/92679882?spm=1001.2101.3001.6650.2&utm\_medium=distribute.pc\_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-92679882-blog-120824691.pc\_relevant\_3mothn\_strategy\_and\_data\_recovery&depth\_1-utm\_source=distribute.pc\_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-92679882-blog-120824691.pc\_relevant\_3mothn\_strategy\_and\_data\_recovery&utm\_relevant\_index=3][https_blog.csdn.net_tangkthh_article_details_92679882_spm_1001.2101.3001.6650.2_utm_medium_distribute.pc_relevant.none-task-blog-2_7Edefault_7ECTRLIST_7ERate-2-92679882-blog-120824691.pc_relevant_3mothn_strategy_and_data_recovery_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2_7Edefault_7ECTRLIST_7ERate-2-92679882-blog-120824691.pc_relevant_3mothn_strategy_and_data_recovery_utm_relevant_index_3]

[https_blog.csdn.net_tangkthh_article_details_92679882_spm_1001.2101.3001.6650.2_utm_medium_distribute.pc_relevant.none-task-blog-2_7Edefault_7ECTRLIST_7ERate-2-92679882-blog-120824691.pc_relevant_3mothn_strategy_and_data_recovery_depth_1-utm_source_distribute.pc_relevant.none-task-blog-2_7Edefault_7ECTRLIST_7ERate-2-92679882-blog-120824691.pc_relevant_3mothn_strategy_and_data_recovery_utm_relevant_index_3]: https://blog.csdn.net/tangkthh/article/details/92679882?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-92679882-blog-120824691.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-92679882-blog-120824691.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=3