JSFiddle - React, Tailwind, and code Playground

by gunit

HTML

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/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-form method="post">
	      <v-container>
	        <v-layout wrap>
	          <v-flex xs12>
	            <v-autocomplete
	              v-model="friends"
	              id="friends"
	              :items="people"
	              box
	              chips
	              label="Select"
	              item-text="name"
	              placeholder="#friends - тут должен быть ID"
	              item-value="id"
	              return-object
	            >
	              <template v-slot:selection="data">
	                <v-chip
	                  :selected="data.selected"
	                  close
	                  @input="remove"
	                >
	                  <v-avatar>
	                    <img :src="data.item.avatar">
	                  </v-avatar>
	                  {{ data.item.name }}
	                </v-chip>
	              </template>
	              <template v-slot:item="data">
	                <template v-if="typeof data.item !== 'object'">
	                  <v-list-tile-content v-text="data.item"></v-list-tile-content>
	                </template>
	                <template v-else>
	                  <v-list-tile-avatar>
	                    <img :src="data.item.avatar">
	                  </v-list-tile-avatar>
	                  <v-list-tile-content>
	                    <v-list-tile-title v-html="data.item.name"></v-list-tile-title>
	                    <v-list-tile-sub-title v-html="data.item.group"></v-list-tile-sub-title>
	                  </v-list-tile-content>
	                </template>
	              </template>
	            </v-autocomplete>

	...

CSS

.input,
#friends {
  border: 1px solid;
}

JavaScript

const srcs = {
  1: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
  2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
  3: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
  4: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
  5: 'https://cdn.vuetifyjs.com/images/lists/5.jpg'
}

const app = new Vue({
  el: '#app',
  data: {
      autoUpdate: true,
      friends: '',
      friendId: '',
      people: [
        { header: 'Group 1' },
        { id: 0, name: 'Sandra Adams', group: 'Group 1', avatar: srcs[1] },
        { id: 1, name: 'Ali Connors', group: 'Group 1', avatar: srcs[2] },
        { id: 2, name: 'Trevor Hansen', group: 'Group 1', avatar: srcs[3] },
        { id: 3, name: 'Tucker Smith', group: 'Group 1', avatar: srcs[2] },
        { divider: true },
        { header: 'Group 2' },
        { id: 4, name: 'Britta Holt', group: 'Group 2', avatar: srcs[4] },
        { id: 5, name: 'Jane Smith ', group: 'Group 2', avatar: srcs[5] },
        { id: 6, name: 'John Smith', group: 'Group 2', avatar: srcs[1] },
        { id: 7, name: 'Sandra Williams', group: 'Group 2', avatar: srcs[3] }
      ],
    },

    methods: {
      remove() {
        this.friends = ''
      }
    },

    watch: {
      friends(val) {
        this.friendId = val.id >= 0 ? String(val.id) : ''
      }
    }
})