Skip to content

V-select

Custom slot example 

    <v-select
        dense
        persistent-hint
        v-model="permission"
        :rules="permissionRules"
        :items="visiblePermissions"
        :hint="$t('hint.permission')"
        item-text="name"
        item-value="uid"
        item-disabled="hidden"
        return-object
    >
      <template v-slot:item="{ item }">
        {{ item.name }}
        <v-chip class="ml-2" x-small outlined color="primary">
          <v-icon left>mdi-identifier</v-icon>
          {{ item.slug }}
        </v-chip>
      </template>

      <template v-slot:selection="{ item }">
        {{ item.name }}
        <v-chip class="ml-2" x-small outlined color="primary">
          <v-icon left>mdi-identifier</v-icon>
          {{ item.slug }}
        </v-chip>
      </template>
    </v-select>

item-text, item-value, return-object 속성이 중요하다!

See also