Add custom data attribute to Vuetify v-select options

Question

I am using a v-autocomplete component to list items in a selector. Since v-autocomplete is just an advanced v-select, I think an answer for v-select would work for v-autocomplete too.

In my list I have items with different statuses which should be marked in some way. So I want to add a data attribute to the options depending on an item property. If I can add at least a different class, that would help too. But since I don't have any option element to add those attributes to, I can't find a way to do it.

My items look like:

{value:1,text:"Option 1",status:"finished"},{value:2,text:"Option 2",status:"running"},{value:3,text:"Option 3",status:"scheduled"}

The idea is to style the options in the select in a different way based on their status. So I want to achieve something like:

<v-autocomplete
    v-model="selectedItem"
    :items="items"
    :item-status="item.status">
</v-autocomplete>

Is this possible?

score 1 · Accepted Answer · answered Nov 08 '21 at 15:11

It sounds like what you need is to utilise the item slot available for v-autocomplete element.

<template v-slot:item="{ item }">
  <div :class="getItemClass(item)">
    {{ item.text }}
  </div>
</template>

Instead of using a getItemClass(item) method, you can also keep the status: className pairings in an object inside component data/computed. The syntax will change to itemClass[item].

The slot allows you to customise the list items in the dropdown. You can even use it to add different icons with different colours to represent the item statuses.

You can create a similar template for the selection slot if you want a custom appearance when an item is selected.

I wasn't getting what exactly these slots were doing and I couldn't find such an example. This is exactly what I was looking for. And this way I can also add `:data-status="item.status"` to the div and it works perfectly. Thank you very much! — Annity, Nov 09 '21 at 07:38

score 0 · Answer 2 · answered Nov 08 '21 at 15:19

You can style the selected option based on the status, here is the basic idea for this but for sure you can make it more dynamic.

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data () {
        return {
        auto: [{value:1,text:"Option 1",status:"finished"},{value:2,text:"Option 2",status:"running"},{value:3,text:"Option 3",status:"scheduled"}],
          selectedAuto: '',
        }
      },
    })

   


    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

    <div id="app">
    <v-app id="inspire">
     <v-autocomplete
       v-model="selectedAuto"
        :items="auto"
         :item-status="auto.status"
>

      <template slot="selection" slot-scope="data">
      <!-- HTML that describe how select should render selected items -->
       <v-list-item-action-text>
        <span v-if="data.item.status == 'finished'" class="green--text">
             {{ data.item.text }}  
        </span>
        <span v-if="data.item.status == 'running'" class="red--text">
             {{ data.item.text }}  
        </span>
        <span v-if="data.item.status == 'scheduled'" class="blue--text">
             {{ data.item.text }} 
        </span>

        </v-list-item-action-text>
    </template>
                            
    <template slot="item" slot-scope="data">
    <!-- HTML that describe how select should render items when the select is open -->
        <v-list-item-action-text>
            {{ data.item.text }}
        </v-list-item-action-text>
     </template>
</v-autocomplete>
</v-app>
    </div>

Add custom data attribute to Vuetify v-select options

2 Answers2