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

Question

我不知道为什么会这样。

当我输入自动完成输入时，我的数据通过 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":[
         
      ]
   }
]

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

Answer 1

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

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

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

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

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

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

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

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

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

Vuetify/VueJS - Autocomplete results not showing until input is cleared

javascript

vue.js

vuejs2

vuetify.js