时间戳

首页 > 解决方案 > Vuetify 自动完成不显示包含多个搜索词的建议

vue.js - Vuetify 自动完成不显示包含多个搜索词的建议

问题描述

当我使用 Vuetify<v-autocomplete>和我的 API 进行搜索时，mytext只有myvalue在写一个类似的词时才会正确更新和显示在建议中FOO，如果我写一个类似的字符串，那么我在 API 调用方法中FOO BAR得到正确的结果，但我得到了console.log(response.data)的建议中没有任何内容<v-autocomplete>。

<template>：

<v-autocomplete
  v-model="select"
  :loading="loading"
  :items="items"
  item-text="mytext"
  item-value="myvalue"
  :search-input.sync="search"
  hide-no-data
  hide-details
  label="My Autocomplete"
>
  <template v-slot:item="data">
    <v-list-item-content>
      <v-list-item-title v-html="data.item.mytext"></v-list-item-title>
      <v-list-item-subtitle
        v-html="data.item.myvalue"
      ></v-list-item-subtitle
    ></v-list-item-content>
  </template>
</v-autocomplete>

<script>：

<script>
export default {
  data() {
    return {
      select: null,
      loading: false,
      items: [],
      search: null
    }
  },
  watch: {
    search(val) {
      console.log('search: ' + val)
      val && val !== this.select && this.query(val)
    }
  },
  methods: {
    async query(v) {
      this.loading = true
      await this.$axios
        .get('/api/foo', {
          params: {
            search: this.search
          }
        })
        .then((response) => {
          console.log(response.data)
          this.items = response.data
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

该search变量似乎与该items变量相关联。

标签： vue.jsautocompletevuetify.js

解决方案

我终于通过将此道具添加到以下内容来修复它<v-autocomplete>：

:filter="() => true"

推荐阅读