JSFiddle - React, Tailwind, and code Playground

by Ryan Poole

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.js"></script>
<body id="app"> <span v-repeat='language : languages'>
      <input
        type='checkbox'
        value="{{language.name}}"
        v-model='language.selected'> {{language.name}}
        </span> 
    <div>{{myLanguages | json}}</div>
</body>

JavaScript

new Vue({
    el: '#app',
    data: {
        languages: [{
            name: 'english',
            selected: true
        }, {
            name: 'japanese',
            selected: false
        }, {
            name: 'chinese',
            selected: true
        }]
    },
    computed: {
        myLanguages: function () {
            return this.languages.filter(function (l) {
                return l.selected
            }).map(function (l) {
                return l.name
            })
        }
    }
});