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?
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>