js_中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件的问题-526互联

中文输入法情况下, 输入框v-model绑定值中没有输入值但却触发input事件的问题

今天写的一个搜索框, 要求输入字符时不作处理, 直到用户点击搜索按钮时才执行搜索逻辑; 当用户将搜索框文本删除至空字符串时, 执行一次无搜索值的搜索逻辑, 用于将表格数据恢复至无筛选; 在这个功能上我想当然地使用了input事件用于触发输入事件, 但是被测试出bug: 当输入法是中文时, 在使用汉语时的初始选字阶段会不停地触发input事件, 但是v-model绑定的值却一直是维持在空字符串, 也就是说, 用户在使用中文选字阶段会一直执行无搜索值的搜索逻辑
解决问题在于: 在input绑定值为空字符串的情况下, input事件的触发有以下三种情况:
- 1. 英文输入, 此时的v-model绑定值从空字符串到字符串, e.data的输入值存在
  2. 中文选词输入, 此时的v-model绑定值为空字符串, e.data存在值;
  3. 删除: e.data值为null, v-model绑定值为空字符串
- 判定如下:
  - 1. 当且仅当input事件对象的data属性为null, 且绑定值为空字符串的情况下, 才代表通过删除清空了输入框的值, 只有在这种情况下才会调用搜索.
  - ```
  // 只用于处理当字符串为空的时候
  const handleSearchValue = async function (event) {
    if (event.data === null && search_companyName.value === '') {
      curPage.value = 1
      await getCompanyList({ search_name: search_companyName.value })
    }
  }
```
- ```
<input
  type="text"
  class="search_input"
  placeholder="按企业名搜索"
  @keydown.enter.native.stop="searchCompanyByName"
  v-model="search_companyName"
  @input="handleSearchValue($event)"
/>
```

输入法

v-model