bugfix> vuetify.js > 投稿

複数のオプションがあるVuetifyオートコンプリートメニューのチェックボックスを非表示にするにはどうすればよいですか?

<v-autocomplete
  v-model="filters.colors"
  :loading="autocomplete.colors.loading"
  :items="autocomplete.colors.menu"
  :search-input.sync="autocomplete.colors.input"
  cache-items
  hide-no-data
  hide-details
  label="Color(s)"
  dense
  multiple
  clearable
  item-text="name"
  :menu-props="{
    closeOnContentClick: true,
  }"
  @change="selectionChanged('colors')"
>
  <template v-slot:selection="data">
    <v-chip
      v-bind="data.attrs"
      :input-value="data.selected"
      close
      x-small
      @click:close="removeChip(data.item, 'colors')"
    >
      {{ data.item.name }}
    </v-chip>
  </template>
</v-autocomplete>

回答 1 件
  • 使用 item v-オートコンプリートコンポーネントのスロット:

    <v-autocomplete
      v-model="filters.colors"
      :loading="autocomplete.colors.loading"
      :items="autocomplete.colors.menu"
      :search-input.sync="autocomplete.colors.input"
      cache-items
      hide-no-data
      hide-details
      label="Color(s)"
      dense
      multiple
      clearable
      item-text="name"
      :menu-props="{
        closeOnContentClick: true,
      }"
      @change="selectionChanged('colors')"
    >
      <template v-slot:selection="data">
        <v-chip
          v-bind="data.attrs"
          :input-value="data.selected"
          close
          x-small
          @click:close="removeChip(data.item, 'colors')"
        >
          {{ data.item.name }}
        </v-chip>
      </template>
      <template v-slot:item="{ item }">
        {{item.name}}
      </template>
    </v-autocomplete>
    
    

あなたの答え