如何在 vuetify v-select 中使用图标？

Question

I have the following v-select that is filled using an array and items prop as shown:

<v-select v-model="myModel"
   :items="users"
   chips
   :readonly="!item.Active"
   label="Required users to finalize"
   item-text="NAME"
   item-value="ID"
   multiple
   filled
   return-object
>
</v-select>

My array has the following:

[{NAME: "NAME1", ID: "001", IS_ACTIVE: true},{NAME: "NAME2", ID: "002", IS_ACTIVE: false} ]

I would like my v-select chips to have a checkmark next to the selected users if they are active. My v-chip should basically look like this:

<v-chip
   class="ma-2"
   color="teal"
   text-color="white"
>
   <v-avatar left>
      <v-icon>mdi-checkbox-marked-circle</v-icon>
   </v-avatar>
</v-chip>

How can I use a v-chip with an icon in this v-select?

Answer 1

Try this :

 new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ users: [{NAME: "NAME1", ID: "001", IS_ACTIVE: true},{NAME: "NAME2", ID: "002", IS_ACTIVE: false}], }), })

 <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.css"/> <link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/> <div id="app"> <v-app id="inspire"> <v-container fluid> <v-select :items="users" label="Required users to finalize" item-text="NAME" item-value="ID" multiple filled chips return-object > <template #selection="{ item }"> <v-chip v-if="item.IS_ACTIVE" class="ma-2" color="teal" text-color="white" > <v-avatar left> <v-icon>mdi-checkbox-marked-circle</v-icon> </v-avatar> {{ item.NAME }} </v-chip> </template> </v-select> </v-container> </v-app> </div>