自定义自动完成输入清除所选选项。 `更新：modelValue`问题

Question

我正在尝试使用 debo 创建自动完成输入，但由于某种原因我无法让它正常工作。 我可以从下拉菜单中选择一个建议，并将其短暂显示在屏幕上，但随后它会与输入本身一起重置。

我很确定错误来自 selectSuggestion 函数的最后一行清除 valueInner，但在选择值后清除输入正是我想要的。但是，我不希望在发生这种情况后清除选定的值。

它可以是 selectSuggestion 函数和 valueInner 上的 watch 的组合，但我还需要 watch 来使去抖工作。

关于如何解决这个问题有什么想法吗？

CodeSandbox 链接： https ://codesandbox.io/s/stoic-forest-7w19oj?file=/src/components/Autocomplete.vue

App.vue

<template>
  <Autocomplete v-model="text" :suggestions="['something','hairstyle','cheese']"/>
  <p>Selected Suggestion:{{text}}</p>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Autocomplete from '../src/components/Autocomplete'

export default defineComponent({
  name: "App",
  setup(){
    const text = ref('')
    return { text }
  },
  components: {
  Autocomplete,
  Autocomplete2,
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

自动完成

<template>
    <input
      ref="inputRef"
      v-model="valueInner"
      :disabled="disabled || undefined"
      :placeholder="placeholder"
      :readonly="readonly || undefined"
      :required="required || undefined"
      :autofocus="autofocus"
      :autocomplete="autocomplete"
      :suggestions="suggestions"
    />
    <ul v-if="filterSuggestions.length">
      <li>
        Showing {{ filterSuggestions.length }} of {{ suggestions.length }} results
      </li>
      <li
        v-for="suggestion in filterSuggestions"
        :key="suggestion"
        @click="selectSuggestion(suggestion)"
      >
        {{ suggestion}}
      </li>
    </ul>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
  nextTick,
  watch,
  PropType,
  computed,
} from 'vue'
export default defineComponent({
  name: 'Autocomplete',
  inheritAttrs: false,
  props: {
    label: {
      type: String,
    },
    disabled: { type: Boolean, default: false },
    placeholder: { type: String },
    readonly: { type: Boolean },
    required: { type: Boolean },
    modelValue: { type: [String, Number], default: '' },
    autocomplete: { type: Boolean, default: false },
    suggestions: {
      type: Array as PropType<string[]>,
      default: ['Hamburger', 'Fries', 'Peanuts'],
    },
    debounce: { type: Number, default: undefined },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    let debounceInner = 0
    if (typeof props.debounce === 'number') {
      debounceInner = props.debounce
    } debounceInner = 1000
    const inputRef = ref<HTMLElement | null>(null)
    const isFocused = ref(false)
    watch(isFocused, (oldVal, newVal) => {
      console.log(`isFocused → `, isFocused)
    })
    let timeout: any = null

    const valueInner = ref<any>(props.modelValue)
    console.log(valueInner.value)
    watch(valueInner, (newVal, oldVal) => {
      const debounceMs = debounceInner
      if (debounceMs > 0) {
        clearTimeout(timeout)
        timeout = setTimeout(() => emitInput(newVal), debounceMs)
      } else {
        emitInput(newVal)
      }
    })
    function emitInput(newVal: any) {
      let payload = newVal
      emit('update:modelValue', payload)
    }
    let selectedSuggestion = ref('')
    const suggestions = ['United States', 'Japan', 'Italy', 'Australia', 'Germany', 'Poland', 'Ukraine']
    const filterSuggestions = computed(() => {
      if (valueInner.value === '') {
          return []
          }
      let matches = 0
      return suggestions.filter((suggestion) =>{
        if (
          suggestion.toLowerCase().includes(valueInner.value.toLowerCase())
          && matches < 10
        ) {
          matches++
          return suggestion
        }
       })
    })
    const selectSuggestion = (suggestion) => {
      selectedSuggestion.value = suggestion
      emitInput(suggestion)
      valueInner.value = ''
    }
    function emitInput(newVal: any) {
      let payload = newVal
      emit('update:modelValue', payload)
    }
    watch(valueInner, (newVal, oldVal) => {
      const debounceMs = debounceInner
      if (debounceMs > 0) {
        clearTimeout(timeout)
        timeout = setTimeout(() => emitInput(newVal), debounceMs)
      } else {
        emitInput(newVal)
      }
    })
    return {
      inputRef,
      valueInner,
      suggestions,
      filterSuggestions,
      selectSuggestion,
      selectedSuggestion,
    }
  },
})
</script>

<style lang="sass" scoped>
li
  list-style: none
</style>

Answer 1

该错误确实来自于清除 valueInner.value，这会触发其上的监视，从而将空白值作为 update:modelValue 事件数据发出，从而覆盖模型值。

快速解决方法是在重置 valueInner.value 时使用 null 而不是空字符串（以区分内部清除与用户输入）：

const selectSuggestion = (suggestion) => {

  selectedSuggestion.value = suggestion

  emitInput(suggestion)

  valueInner.value = null