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