Search code examples
vue.jsvuejs2comboboxvuetify.js

How can i delete the default icon in vuetify?


enter image description here

I am using vuetify. I needed the "v-combobox" tag, but it has an arrow icon by default, I rummaged through the Vuetify documentation and it didn't help to understand how to remove it, what can I do without losing the application logic? Maby i can kill it at html lvl?

<template>
<v-app>
    <v-combobox
        v-model="chips"
        :items="items"
        chips
        clearable
        multiple
        solo>
        <template v-slot:selection="{ item }">
            <v-chip close @click:close="remove(item)">
                <strong>{{ item }}</strong
                >&nbsp;
            </v-chip>
        </template>
    </v-combobox>
</v-app>
</template>

<script>
export default {
    name: "Test",
    data: () => ({
        chips: ["hello", "stack", "overflow"],
    }),
    methods: {
        remove(item) {
            this.chips.splice(this.chips.indexOf(item), 1);
            this.chips = [...this.chips];
            },
        }
    };
</script>

Solution

  • Add this prop to the combobox :append-icon="null"
    Have a read of docs here https://vuetifyjs.com/en/api/v-combobox/#links

          <v-combobox
            v-model="chips"
            :items="items"
            chips
            clearable
            multiple
            solo
            :append-icon="null">