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

今天写的一个搜索框, 要求输入字符时不作处理, 直到用户点击搜索按钮时才执行搜索逻辑; 当用户将搜索框文本删除至空字符串时, 执行一次无搜索值的搜索逻辑, 用于将表格数据恢复至无筛选; 在这个功能上我想当然地使用了input事件用于触发输入事件, 但是被测试出bug: 当输入法是中文时, 在选字阶段会不停地触发input事件, 但是v-model绑定的值却一直是维持在空字符串, 也就是说, 用户在使用中文选字阶段会一直执行无搜索值的搜索逻辑

解决问题在于: 在input绑定值为空字符串的情况下, input事件的触发有以下两种情况:

• 1. 中文选词输入, 此时的v-model绑定值为空字符串, e.data存在值;
  2. 删除: e.data值为null, v-model绑定值为空字符串

• 判定如下:

  • 当且仅当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)"
    />