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?

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?

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow edited Jun 7, 2022 at 9:02 RenaudC5 3,83911 gold badge1313 silver badges3030 bronze badges asked Jun 7, 2022 at 1:13 QiuzmanQiuzman 1,7772929 silver badges8282 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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./[email protected]/dist/vue.js"></script>
<script src="https://unpkg./[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg./[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg./@mdi/[email protected]/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>