vue中模糊搜索keyup在中文输入法下输入英文无效的解决方法
keyup事件在中文输入法下输入英文,vue中对应的val属性值为空。控制台显示并没有获取到任何值,但是input中确实有字母。纳尼?说好的双向绑定呢?要解决这个问题可以采用watch+keyup事件的方法。watch首先可以解决keyup失效的问题,可以检测到值的变化。但是也因此产生了问题,当点击下拉列表里的问题输入进input框的时候,watch会再一次检测到值的变化,重复调用接口。...
·
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呢?
只有在你按下键盘的时候...
更多推荐
已为社区贡献14条内容
所有评论(0)