Simple dropdown using Vue.js

by Ford Heacock

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
    <div id="app"></div>
</body>

CSS

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

JavaScript

new Vue({
    el: '#app',
    template: `
        <div>
            <select v-model="selectedPerson">
                <option v-for="person in people" :value="person.name">{{person.name}}</option>
            </select>
            <h4>Selected person key: {{selectedPerson}}</h4>
            <button @click='addThing'>add thing</button>
        </div>
    `,
    data: {
        people: [
            {key: 2, name: "Carol"},
            {key: 3, name: "Clara"},
            {key: 4, name: "John"},
            {key: 5, name: "Jacob"},
            {key: 6, name: "Mark"},
            {key: 7, name: "Steve"}
        ],
        selectedPerson: ""
    },
    watch: {
    	selectedPerson() {
      	if (this.selectedPerson.includes('booby')) this.doSomething();
      }
    },
    methods: {
    	doSomething() {
      	alert('lol bobby')
      },
    	addThing() {
      	this.people.unshift({key: 1, name: 'booby smith', age:30})
      }
    },
    mounted() {
    	this.$nextTick(() => {
      	this.addThing();
      })
    }
});