Simple dropdown using Vue.js

by gadurp1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<body>
  <div id="app">
    <template>
    		 <div class="p-10 ">
				 		<label for=""> <b>Choose a contact</b> </label>
            <select v-model="selectedPerson" class="w-full  h-10 mt-2 shadow-lg">
									<option v-for="person in people" :value="person">
											<span v-if="person.name">
												{{person.name}}
											</span>
											<span v-if="person.email && !person.name">
												{{person.email}}
											</span>
									</option>

            </select>
						<transition name="fade">
						<div class="mt-10" v-if="selectedPerson">
							<h4>Selected Person:</h4>
							<pre class="bg-grey-darkest text-white font-bold text-left mt-2 rounded  p-3 shadow-lg">
								<code>
									{{ selectedPerson }}
								</code>
							</pre>
						</div>
						</transition>
        </div>
    	</template>
  </div>
</body>

CSS

body {
  margin: 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background:#418E8E;
	color:white
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

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: ""
  },
});