CODEWITHSUNDEEP
vuetify.js
pery mimon
pery mimon

Reputation: 8315

Vuetify : On <Autocomple> component How bring my own custom `v-list-item`

In Vuetify components-lib there is a hint that on I can bring my own custom v-list-item with slot:item

// item
// Description
// Define a custom item appearance

// Props
{
  parent: VueComponent
  item: object
  on: object // Only needed when providing your own v-list-item
  attrs: object // Only needed when providing your own v-list-item
}

How can I achive that? because when I do

<template v-slot:item="data">
   <book :book="data.item"></book>
</template>

Vutifiey warp-up it with own v-list-item and I want to put some custom class on part ot the v-list-items

Upvotes: 0

Views: 1596

Answers (2)

InToSSH
InToSSH

Reputation: 159

I know this is an old question, I was looking for the same thing so if anybody needs this in the future, the answer is:

<template v-slot:item="{item, on, attrs}">
    <v-list-item
        v-bind="attrs"
        v-on="on"
    >
        <v-list-item-avatar>
            <v-icon v-if="attrs.inputValue">mdi-checkbox-marked</v-icon>
            <v-icon v-else>mdi-checkbox-blank-outline</v-icon>
        </v-list-item-avatar>
        <v-list-item-content>
            <v-list-item-title>{{ item.text }}</v-list-item-title>
        </v-list-item-content>
    </v-list-item>
</template>

Upvotes: 1

aby.js
aby.js

Reputation: 179

It is a very common scenario to add some custom styling in the v-auto-complete's list. But, there is no way of avoiding v-list/v-list-item as Vuetify does not give you the full control of the dropdown menu.

As you may have noticed that dropdown menu is like the v-menu and the input element for v-autocomplete is the activator of the dropdown menu. So, this is how the v-autocomplete component works:

  • Vuetify creates a dropdown menu and add its own logic(HTML, CSS, JS) into it.
  • it gives users the slots to add custom markup/components inside the v-list-items

That is why there is no way of avoiding the v-list component.

I have attached a pen to help you in better understanding how you can use a custom component inside v-list/v-list-item of v-autocomplete: https://codepen.io/abdullah-shabaz/pen/MWwZNYW

If you are having some problems with styling your book component please tell me. I am sure I can help you with it.

Upvotes: 1

Related Questions