keyup事件在中文输入法下输入英文,vue中对应的val属性值为空。控制台显示并没有获取到任何值,但是input中确实有字母。纳尼?说好的双向绑定呢?

要解决这个问题可以采用watch+keyup事件的方法。

watch首先可以解决keyup失效的问题,可以检测到值的变化。但是也因此产生了问题,当点击下拉列表里的问题输入进input框的时候,watch会再一次检测到值的变化,重复调用接口。

 所以,我们就立个flag好了... 

  代码如下:

 //使用watch+keyup时间解决 keyup在中文输入法下输入英文不能调取search方法的问题
  watch: {
    val: {
      handler: function () {
        if (this.flag === "true") {
          this.search();
          this.flag = "flase"
        }

      },
      deep: true
    }
  }

  keyup事件:

  flag 值默认为 flase

flagStatus () {
   this.flag = "true"
},

注:

   flag解决了重复调用接口的问题,只有在flag值为true的时候,我们才允许他调用接口。

   值什么时候为true呢?

   只有在你按下键盘的时候...

Logo

前往低代码交流专区

更多推荐