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

Answer by Igor Moraru for Vuetify change checkbox icon in v-select / v-combobox

$
0
0

You can use the item slot, where you are provided with the item, on and attrs object, to replicate the default behaviour.

You bind the on (events) and attrs (properties) objects to the custom list item, to send click events from your list item to combobox component.

Next you set the appropriate icon depending on the selected values. See the code below and the code sandbox.

<template><v-app><v-combobox      label="Label"      outlined      multiple      chips      v-model="select"      :items="items"><template v-slot:item="{ item, on, attrs }"><v-list-item v-on="on" v-bind="attrs"><v-list-item-icon><v-icon>              {{ select.includes(item) ? checkIcon : uncheckIcon }}</v-icon></v-list-item-icon><v-list-item-content><v-list-item-title v-text="item" class="text-left"></v-list-item-title></v-list-item-content></v-list-item></template></v-combobox></v-app></template><script>import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";export default {  name: "HelloWorld",  data() {    return {      items: ["One", "Two", "Three"],      select: [],      uncheckIcon: mdiCheckboxBlankOutline,      checkIcon: mdiCheckboxMarked,    };  },};</script> 

CodeSandbox: https://codesandbox.io/s/recursing-banach-cb7ys?file=/src/components/HelloWorld.vue


Viewing all articles
Browse latest Browse all 2

Trending Articles



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