vue-resource 通过监听键盘Enter键来发送请求,请求失败,Status=cancle(Chrome)

本文介绍在Vue中如何使用input标签实现模糊与精准搜索,并监听Enter键触发事件。通过$refs对input元素进行焦点控制,确保了用户体验。同时,展示了如何通过$http发送GET请求并处理响应。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue的input标签:
 <input type="search" class="weui-search-bar__input" v-bind:placeholder="isQueryByLike?'模糊搜索':'精准搜索'" ref="search">

vue对enter键的监听:

created:function(){
      var that=this;
      document.onkeydown=function(e){
          var key=window.event.keyCode;
          if(key==13){
              that.getCode();
          }
      }
    },

vue对事件处理的method:

methods: {
        getCode: function (event) {
            
            this.$refs.search.blur();
            <!--上面这句话就是最后的处理办法,让input标签失去焦点,具体的原理不懂-->
            var bindphone = this.$refs.search.value;
            if(""==bindphone) {
                this.showErrMessage("请输入搜索条件");
                return;
            }
            
            var url = getCodeUrl + '?bindphone=' + bindphone + '&choice=' + choice;
            <!--url后面的getcodeurl这个是在资源文件里面写的,es6吧!,后来导入-->
            this.$http.get(url,{ emulateJSON : true,withCredentials: true }).then(function(res){
                console.log(res.body);
                console.log(res.body.data);
                if(res.body.code == 1){
                    .....
                }else{
                   .....
                }
            },function(){
                console.log('请求失败处理');
            });

        },

处理办法:

this.$refs.search.blur();

通过这个,对input的标签焦点处理!具体的原理不是很清晰,只是知道处理办法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值