<template>
	<div>

		<!-- Label only -->
		<v-chip label="Jane Doe"></v-chip>

		<!-- Label and image -->
		<v-chip img-src="avatar.jpg" label="Jane Doe"></v-chip>

		<!-- Closable chip with label -->
		<v-chip label="John Doe" :closable="true"></v-chip>

		<!-- Closable chip with label and image -->
		<v-chip img-src="avatar.jpg" label="John Doe" :closable="true"></v-chip>

		<!-- With text and background color -->
		<v-chip img-src="avatar.jpg" label="Harry Doe" :closable="true" bg-color="#003b62" color="#89aec5"></v-chip>


		<!-- chips from input field -->
		<v-chip-input v-model="humans"></v-chip-input>

		<!-- chips from options -->
		<v-chip-input v-model="names" :options="planets"></v-chip-input>

		<ul>
			<li v-for="human in humans"> {{ human }}</li>
		</ul>

		<ul>
			<li v-for="destination in destinations"> {{ destination }}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				humans: [],
				destinations: [],
				planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn',  'Uranus', 'Neptune', 'Pluto']
			}
		},

		
	}
</script>