Simple dropdown using Vue.js

by alcosbarco

HTML

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

JavaScript

new Vue({
    el: '#app',
    template: `
        <div>
            <select v-model="selectedPerson">
                <option v-for="person in people" :value="person.key">{{person.name}}</option>
            </select>
            <h4>Selected person key: {{selectedPerson}}</div>
        </div>
    `,
    data: {
        people: [
            {key: 1, name: "Carl"},
            {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: ""
    }
});