Vue

by shamaleyte

HTML

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
<script src="https://fonts.googleapis.com/css?family=Material+Icons"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row>
        <v-col cols="12">
          <v-combobox
            v-model="select"
            :items="items"
            label="Combobox"
            hide-selected
            multiple
            outlined
            dense
            clearable
            close
            @keydown.enter="keyD"
          >
            
            <template v-slot:selection="{ attrs, item, select, selected }">
			 <v-chip
							 v-bind="attrs"
							 :input-value="selected"
							 close
							 @click="select"
							 @click:close="removeTerm(item)"
							 >
				<strong>{{ item }}</strong>			
			 </v-chip>
			</template>
            
          </v-combobox>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

Vue

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      select: [],
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify',
      ],
    }
  },
  methods : {
    removeTerm(item){
      this.select.splice(this.select.indexOf(item), 1)
      this.select = [...this.select]
    },
    keyD(){
      console.log("keyd");
    }
  }
})