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

哈哈9992023-10-19 17:56

需求：使用中文输入法，当还处于拼字阶段时，输入框的字符也可以拿到，并从服务端搜索数据。

问题：中文输入法，当还处于拼字阶段时，输入框的值无法拿到。

使用框架：vue2

查看了很多网站的搜索引擎，确实是有如此处理的，确认需求合理。

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

js 复制代码

<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的值：

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

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

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

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

我们将代码稍加改动：

js 复制代码

<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,成功！

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