JSFiddle - React, Tailwind, and code Playground

by FANTAzeRus

HTML

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

<template id="booleanfield-template">
    <input type="checkbox" v-model="model">
</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: Boolean
    }
});

new Vue({
    el: '#propertyBox',

    data: {
        propData: testObj
    },
    
    ready: function() {
    	alert('111');
    }
});