Tengo la siguiente selección en V que se completa con una matriz y accesorios de elementos como se muestra:
<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>Mi matriz tiene lo siguiente:
[{NAME: "NAME1", ID: "001", IS_ACTIVE: true},{NAME: "NAME2", ID: "002", IS_ACTIVE: false} ]Me gustaría que mis chips v-select tuvieran una marca de verificación junto a los usuarios seleccionados si están activos. Mi v-chip debería verse básicamente así:
<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> ¿Cómo puedo usar un v-chip con un ícono en este v-select?
Prueba esto :
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>