Quantcast
Channel: Vuetify change checkbox icon in v-select / v-combobox - Stack Overflow
Viewing all articles
Browse latest Browse all 2

Vuetify change checkbox icon in v-select / v-combobox

$
0
0

I use Vuetify but disabled the import of all icons since treeshaking wasn't working properly in Nuxt, instead I followed the advice and import them manually as stated in this thread: vuetifyjs: Adding only used icons to build

However, this means that a lot of components that require icons, e.g v-checkbox, v-select or v-combobox (which uses v-checkbox in their dropdown menus) need their icons added manually. Just using v-checkbox allows for :on-icon & :off-icon props to be used but I can't figure out how I'd reach them when the checkboxes are used by other components.I've been attempting to change the behaviour in both v-select and v-combobox.

This is as far as I got but clearly this doesn't add the checked icon, just the blank one.

<v-combobox outlined multiple chips v-model="select" :items="items"><template v-slot:item="{ item }"><v-icon>{{mdiCheckboxBlankOutline}}</v-icon>{{ item }}   /template></v-combobox>import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";Data(){select: ["Stockholm"],      items: ["Stockholm","London",      ],}

My question is therefore, how can replicate the default checkbox behaviour for the combobox menu using imported icons?This thread seems to talk about it but never ends up showing a code example:https://github.com/vuetifyjs/vuetify/issues/10904(Meaning it should look like this)enter image description here


Viewing all articles
Browse latest Browse all 2

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>