Simple dropdown using Vue.js

by gadurp1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
    <div id="app">
    	<template>
    		        <div>
            <select v-model="selectedPerson">
									<option v-for="person in people" :value="person.name">
											<span v-if="person.name">
												{{person.name}}
											</span>
											<span v-if="person.email && !person.name">
												{{person.email}}
											</span>
									</option>

            </select>
            <h4>Selected Person: {{selectedPerson}}</div>
        </div>
    	</template>
    </div>
</body>

CSS

body {
  margin: 20px;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

JavaScript

new Vue({
    el: '#app',
    data: {
        people: [
						{
								key: 1, 
								name: "Carl",
								email: "[email protected]",
						},
						{
								key: 2, 
								name: "",
								email: "[email protected]",
						},
						{
								key: 3, 
								name: "Clara",
								email: "",
						},
						{
								key: 4, 
								name: "John",
								email: "[email protected]",

						},
						{
								key: 5, 
								name: "Jacob",
								email: "[email protected]",
						},
						{
								key: 6, 
								name: "Mark",
								email: "",
						},
						{
								key: 7, 
								name: "",
								email: "[email protected]",
						}
        ],
        selectedPerson: ""
    },
});