Add custom data attribute to Vuetify v-select options-CodePudding

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?

CodePudding user response：

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

<template v-slot:item="{ item }">
  <div :>
    {{ 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.

CodePudding user response：

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>