JSFiddle - React, Tailwind, and code Playground

by FANTAzeRus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css">
<template id="propbox-template">
    <div>
        <div v-for="(key, item) in model">
        {{ key }} - <booleanfield v-if="typeof item == 'boolean'" :model="model" :key="key"></booleanfield>
        </div>
    </div>
</template>

<template id="booleanfield-template">
    <input type="checkbox" v-model="model[key]">
</template>

<div id="propertyBox">
  <propbox :model="propData"></propbox>
  
  <div class="notification is-primary debug">
    {{ propData | json }}
  </div>
</div>

CSS

#propertyBox {
  margin: 2em;
}

.debug {
  margin-top: 20px;
}

JavaScript

var testObj = {
    showTitle: false,
    displayUSerName: true,
    saveBeforeExit: true,
    autoSelect: false
};

Vue.component('propbox', {
    template: '#propbox-template',

    props: {
        model: Object
    }
});

Vue.component('booleanfield', {
    template: '#booleanfield-template',

    props: ['model', 'key']
});

new Vue({
    el: '#propertyBox',

    data: {
        propData: testObj
    }
});