Vuetify/VueJS - 在输入被清除之前不会显示自动完成结果答案

【问题标题】：Vuetify/VueJS - Autocomplete results not showing until input is clearedVuetify/VueJS - 在输入被清除之前不会显示自动完成结果
【发布时间】：2022-01-12 16:40:14
【问题描述】：

我不知道为什么会这样。

当我输入自动完成输入时，我的数据会通过 axios 获取，它会填充“searchResults”，但在输入被清除之前不会显示结果。

自动完成：

<v-slide-x-transition>
  <v-autocomplete
    :items="searchResults"
    :loading="isSearching"
    :search-input.sync="search"
    color="primary"
    hide-no-data
    hide-selected
    item-text="Description"
    item-value="API"
    label="Search"
    placeholder="Start typing to Search"
    prepend-icon="mdi-database-search"
    return-object
    class="ml-2 mt-2"
    v-if="searchBox"
  >
    <template v-slot:item="data">
      <v-list-item-avatar>
        <v-icon>
          mdi-account
        </v-icon>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title v-html="data.item.first_name"></v-list-item-title>
        <v-list-item-subtitle v-html="data.item.last_name"></v-list-item-subtitle>
      </v-list-item-content>
    </template>
  </v-autocomplete>
</v-slide-x-transition>

代码：

export default {
  name: 'navBar',
  data: () => ({
    searchBox: true,
    search: null,
    select: null,
    searchResults: [],
    isSearching: false,
  }),
  watch: {
    search(val) {
      this.querySelections(val);
    },
  },
  methods: {
    showSearch() {
      this.searchBox = true;
    },
    hideSearch() {
      this.searchBox = false;
      this.search = null;
      this.searchResults = [];
    },
    async querySelections() {
      this.isSearching = true;
      const res = await this.callApi('get', '/app/search?query=' + this.search);
      if (!res.data) {
        this.searchResults = [];
      } else {
        this.searchResults = res.data;
      }
      console.log(this.searchResults);
      this.isSearching = false;
    }
  },
  mounted() {
  }
}

json：

[
   {
      "id":1,
      "first_name":"Nigel",
      "last_name":"Brian",
      "email":"n.br@thes.co.uk",
      "email_verified_at":"2021-12-02T00:00:00.000000Z",
      "super_admin":1,
      "profile_photo":"1642002293.jpg",
      "created_at":null,
      "updated_at":"2022-01-12T15:53:41.000000Z",
      "deleted_at":null,
      "permissions_for_vue":"{\"users_add\":true,\"users_view\":true,\"users_edit\":true,\"users_delete\":true,\"users_permissions\":true}",
      "permissions_alt":{
         "users_add":true,
         "users_view":true,
         "users_edit":true,
         "users_delete":true,
         "users_permissions":true
      }
   },
   {
      "id":2,
      "first_name":"Jane",
      "last_name":"Parker",
      "email":"j.parks@test.co.uk",
      "email_verified_at":"2021-12-02T00:00:00.000000Z",
      "super_admin":0,
      "profile_photo":"1641313913.jpg",
      "created_at":null,
      "updated_at":"2022-01-12T14:18:29.000000Z",
      "deleted_at":null,
      "permissions_for_vue":"{\"users_permissions\":true,\"users_add\":true,\"users_view\":true,\"users_edit\":true,\"users_delete\":true}",
      "permissions_alt":{
         "users_permissions":true,
         "users_add":true,
         "users_view":true,
         "users_edit":true,
         "users_delete":true
      }
   },
   {
      "id":5,
      "first_name":"Nick",
      "last_name":"Walters",
      "email":"n.w@email.co.uk",
      "email_verified_at":"2021-12-02T00:00:00.000000Z",
      "super_admin":0,
      "profile_photo":null,
      "created_at":null,
      "updated_at":"2022-01-12T15:27:22.000000Z",
      "deleted_at":null,
      "permissions_for_vue":"{\"users_permissions\":true,\"users_add\":true,\"users_view\":true,\"users_delete\":true,\"users_edit\":true}",
      "permissions_alt":{
         "users_permissions":true,
         "users_add":true,
         "users_view":true,
         "users_delete":true,
         "users_edit":true
      }
   },
   {
      "id":16,
      "first_name":"Billy",
      "last_name":"Brag",
      "email":"234edgh@Erg.com",
      "email_verified_at":null,
      "super_admin":1,
      "profile_photo":null,
      "created_at":"2022-01-12T15:34:02.000000Z",
      "updated_at":"2022-01-12T15:43:17.000000Z",
      "deleted_at":null,
      "permissions_for_vue":"[]",
      "permissions_alt":[
         
      ]
   }
]

我在这里有什么明显的遗漏吗？感谢阅读！

【问题讨论】：

看起来 v-autocomplete 在您的数据中找不到匹配项。如果您错误地设置了item-text 和item-value 值，则可能会发生这种情况。您能否在这篇文章中包含您的 API 数据的示例 JSON？
嘿！我已经添加了 json 数据 - 感谢您查看

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

正如我之前在评论中指出的，问题出在item-value 和item-text 属性中。

您的 JSON 数据中没有 Description 和 API 字段，但这些字段已在模板中指定。

According to docs，这些字段可以包含string、array 或function。

因此，您可以将其更改为 string 值，并带有 应该存在于 JSON 中的字段名称：

...
item-text="first_name"
item-value="id"
...

或使用function 创建一个方法，该方法将返回一些组合值：

...
:item-text="getFullName"
item-value="id"
...
methods: {
  ...
  getFullName(item) {
    return [item.first_name, item.last_name].join(' ')
  }
}

您可以使用静态数据at CodePen查看此解决方案。

【讨论】：