0š
Iām not quite sure what you want, but I give it a shot:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
isLoading: false,
items: [],
model: null,
search: null,
},
methods: {
closeChip(item) {
this.model = this.model.filter(e => e !== item.symbol)
}
},
watch: {
model(val) {
if (val != null) this.tab = 0
else this.tab = null
},
search(val) {
// Items have already been loaded
if (this.items.length > 0) return
this.isLoading = true
// Lazily load input items
fetch('https://api.coinmarketcap.com/v2/listings/')
.then(res => res.json())
.then(res => {
this.items = res.data
})
.catch(err => {
console.log(err)
})
.finally(() => (this.isLoading = false))
},
}
})
<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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-container>
<v-row>
<v-col>
<v-autocomplete v-model="model" :items="items" :loading="isLoading" :search-input.sync="search" chips clearable hide-details hide-selected item-text="name" item-value="symbol" label="Search for a coin..." solo multiple>
<template v-slot:no-data>
<v-list-item>
<v-list-item-title>
Search for your favorite
<strong>Cryptocurrency</strong>
</v-list-item-title>
</v-list-item>
</template>
<template v-slot:selection="{ attr, on, item, selected }">
<v-chip
v-bind="attr"
:input-value="selected"
close
color="blue-grey"
class="white--text"
v-on="on"
@click:close="closeChip(item)"
>
<v-icon left>mdi-coin</v-icon>
<span v-text="item.name"></span>
</v-chip>
</template>
<template v-slot:item="{ item }">
<v-list-item-avatar
color="indigo"
class="headline font-weight-light white--text"
>
{{ item.name.charAt(0) }}
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
<v-list-item-subtitle v-text="item.symbol"></v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-coin</v-icon>
</v-list-item-action>
</template>
</v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
In this snippet data is loaded async, then you can choose which data element to add to the input field as a chip. The chips then can be removed, etc.
Source:stackexchange.com