问题记录:input不跟随字符输入从服务端搜索数据

307 阅读1分钟

需求:使用中文输入法,当还处于拼字阶段时,输入框的字符也可以拿到,并从服务端搜索数据。
问题:中文输入法,当还处于拼字阶段时,输入框的值无法拿到。
使用框架:vue2

查看了很多网站的搜索引擎,确实是有如此处理的,确认需求合理。 GIF 2023-10-19 15-36-25.gif

GIF 2023-10-19 15-36-52.gif

用一个小demo来实现我使用方法:

<template>
  <div class="app">
    <input v-model="text" />
  </div>
</template>


<script>
export default {
  data() {
    return {
      text:''
    };
  },
  watch: {
    text(val){
      console.log('text:',val)
    }
  },
};
</script>

当输入法是英文时,可以跟随input字符输入拿到text的值:

GIF 2023-10-19 15-21-23.gif

当输入法是中文时,只有拼字结束后才能拿到text的值:

GIF 2023-10-19 15-22-14.gif

翻看官方文档发现了下面这段话:

group1_M00_01_2E_CgAAEWUwmuGAEuEXAAClAD3xOPQ190.jpg

那么我们就知道了v-model在拼写阶段不会触发更新,需要在@input事件拿到text的值。

v-model是语法糖, v-model等价于 给一个input框提供了 :value属性以及 @input事件

我们将代码稍加改动:

<template>
  <div class="app">
    <input :value="text" @input="textChange" />
  </div>
</template>


<script>
export default {
  data() {
    return {
      text:''
    };
  },
  methods: {
    textChange(val){
      console.log('text:',val)
    }
  },
};
</script>

ok,成功!

GIF 2023-10-19 15-54-39.gif

知识点: 表单输入绑定 | Vue.js (vuejs.org)