时间戳

首页 > 解决方案 > 无法选择自定义组合框项目 (Vuetify)

vue.js - 无法选择自定义组合框项目 (Vuetify)

问题描述

我在使用 Vuetify 的组合框时遇到的两个问题：

  1. 输入在模糊时被清除（组合框未集中），我不想要这个。如果我不使用 v-slot:item 自定义我的项目的外观，则不会发生这种情况。
  2. 当我尝试使用 v-slot:item 自定义我的项目时无法选择任何项目，但如果我不自定义项目，我可以选择它们。

当我基本上只是直接从文档中复制并根据我的需要进行调整时，我不知道自己做错了什么。

  <v-combobox
    @focus="isShaped = true"
    @blur="isShaped = false"
    v-model="card_name"
    :loading="isLoading"
    :items="cards"
    hide-no-data
    prepend-inner-icon="mdi-magnify"
    append-icon=""
    outlined rounded :shaped="isShaped"
    label="Search for a card"
    :search-input.sync="search"
    item-text="name"
    item-value="set_name"
  >
    <template v-slot:item="{ item }">
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title class="mb-2">{{item.name}}</v-list-item-title>
          <v-list-item-subtitle>{{item.set_name}}</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </template>

    <template v-slot:selection="{ item }">
      <span v-text="item.name"></span>
    </template>

    <template v-slot:progress>
      <v-progress-circular
        class="mt-3"
        v-if="isLoading"
        indeterminate
        color="primary"
        :width="2"
        :size="30"
      ></v-progress-circular>
    </template>
  </v-combobox>

这是代码笔： https ://codepen.io/chataolauj/pen/RwwYxBg ?editors=1010

标签： vue.jsvuetify.js

解决方案

推荐阅读