Javascript vue选择|仅当输入的长度等于或大于3时才显示选项

如标题中所述，我希望防止出现下拉列表，除非一个人键入3个或更多字符

据我所知，没有选择以本机方式执行此操作并访问的值，因此我认为我可以侦听单个按键事件，并拥有一个可变字符串，searchInput附加新添加的字母ValidateInput。一旦字符串的长度也可以使用大于2的数组，则显示：选项

它不起作用，但我还是在分享我的代码

<template>
...
  <v-select :options="listOfCountries" @keydown.native="validateInput" v-model="country"
          placeholder="Type 3 or more letters..." label="name">
    <template slot="option" slot-scope="option">
        ...
    </template>
  </v-select>
...
</template>

<script>
import vSelect from "vue-select";
import "vue-select.css";
import COUNTRIES from "./countries.json";

export default {
  ...
  data() {
    return {
      country: null,
      searchInput: "",
      countries: [],
    };
  },
  created() {
    this.countries = (this.searchInput.length > 2) ? COUNTRIES : []
  },
  computed: {
    listOfCountries() {
      return this.countries.filter((el) => {
        return !this.state.countriesISOs.includes(el.code);
      });
    },
  },
  methods: {
    validateInput(e) {
      const isCharacterValid = /[a-z]/g.test(e.key);
      if (isCharacterValid) this.searchInput = this.searchInput + e.key;
    },
  },
  ...
<script>

任何提示都将不胜感激。我很乐意继续使用此解决方案，但我打赌有一种更简单的方法可以做到这一点：

谢谢你，普里奥特