问Live Search组件

EN

data() {
    return {
      result: "",
      modal: false,
      results: [],
      filteredResults: [],
    };
  },
  mounted() {
    axios
      .get("secretDataURL")
      .then((response) => {
        this.filteredResults = response.data;
      })
      .catch((error) => (this.filteredResults = console.log(error)))
      .finally(() => console.log("Data successfully loaded"));
  },
  methods: {
    filterResults() {
      if (this.result.lenght == 0) {
        this.filteredResults = this.results;
      }
      this.filteredResults = this.results.filter((result) => {
        return result.toLowerCase().startsWith(this.result.toLowerCase());
      });
    },
    setResult(result) {
      this.result = result;
      this.modal = false;
    },
  },
  watch: {
    state() {
      this.filterResults();
    },
  }

<div @click="modal = false"></div>
    <input
      type="text"
      v-model="result"
      autocomplete="off"
      @input="filterResults"
      @focus="modal = true"
    />
    <div v-if="filteredResults && modal">
      <ul>
        <li
          v-for="(filteredResult, index) in filteredResults"
          :key="index"
          @click="setResult(filteredResult)"
        >
          {{ filteredResult.name }}
        </li>
      </ul>
    </div>