How can i delete the default icon in vuetify?-CodePudding

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>

CodePudding user response：

Check this codesandbox I made:

If you just want to hide the icon for an expecific combobox, you can do it with CSS, in this example I just created an special class named noicon-combo, and configured like this:

<v-col cols="12">
  <v-combobox
    v-model="select"
    
    :items="items"
    label="Combobox No Icon"
    multiple
    outlined
    dense
  ></v-combobox>

  <v-combobox
    v-model="select"
    :items="items"
    label="Combobox"
    multiple
    outlined
    dense
  ></v-combobox>
</v-col>

/* Normal version */
.noicon-combo .v-select__slot .v-input__icon {
  display: none !important;
}

/* Scoped version */
.noicon-combo >>>.v-select__slot .v-input__icon {
  display: none !important;
}

CodePudding user response：

If you only want to hide arrow icon:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      chips: ["hello", "stack", "overflow"],
      items: [1,2,3]
    }
  },
  methods: {
    remove(item) {
      this.chips.splice(this.chips.indexOf(item), 1);
      this.chips = [...this.chips];
    }
  }
})

.v-application .primary--text .mdi-menu-down {
color: transparent !important;
}
.mdi-menu-down {
color: transparent !important;
}

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
        <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-container>
      </v-main>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</body>
</html>