JSFiddle - React, Tailwind, and code Playground

by Alex Kyriakidis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
    <grades :grades="grades" :selected.sync="selectedGrade"></grades>

    <template id="grades-list">
        Curently selected: Title {{selected.title}} Value: {{selected.value}}
        <select v-model="selected">
            <option v-for="grade in grades" :value="grade">{{grade.title}}</option>
        </select>
    </template>
</body>

JavaScript

Vue.component('grades', {
    props: ['grades', 'selected'],
    template: '#grades-list'
})

var vm = new Vue({
    el: 'body',
    data: {
        grades: [{
            title: 'One',
            value: 1
        },{
            title: 'Two',
            value: 2
        },{
            title: 'Three',
            value: 3
        }],
        'selectedGrade': ''
    },
    ready() {
        this.$set('selectedGrade', this.grades[1])
    }
})