JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="demo">
    <test todo="{{todoTable}}">
		<table class="table" v-if="todoTable.data.length">

			<!-- table head --> 
			<thead>
				<tr>
					<th></th>
					<th v-if="todoTable.columns[0].display">{{todoTable.columns[0].name}}</th>
                    <th v-if="todoTable.columns[1].display">{{todoTable.columns[1].name}}</th>
				</tr>
			</thead>

			<!-- table body --> 
			<tbody>
				<tr v-repeat="item in todoTable.data">
					<td><input type="checkbox" v-model="item.selected"></td>
					<td v-if="todoTable.columns[0].display">{{item.title}}</td>
                    <td v-if="todoTable.columns[1].display">{{item.description}}</td>
				</tr>
			</tbody>

		</table>
	</test>
</div>

<!-- Templates -->
<script type="text/x-template" id="test-template">
    <div>
        This table is within a "content" element and has {{todoTable.totalColumns}} columns.
        <div>
            <span v-repeat="column: todoTable.columns">{{column.name}},</span>
        </div>
        <content></content>
    </div>
</script>

JavaScript

Vue.config.debug = true;
new Vue({ 
    el: '#demo',
	data: {
    	todoTable: {
            totalColumns: 0,
            data: [],
            // this throws vue errors in console
            columns: []
            // this works
            // columns: [{name: 'Title', display: true}, {name: 'Description', display: false}]
        }
    },
    ready: function(){
        
        // simulate ajax response
      	setTimeout(function(){  
            this.todoTable.columns = [{name: 'Title', display: false},{name: 'Description', display: true}];
            this.todoTable.data = [{title: 'Kris', description:"foo"}, {title: 'Bob', description: "bar"}];
            this.todoTable.totalColumns = this.todoTable.columns.length;
        }.bind(this), 100);
    },
    components: {
    	'test': {
            props: {
                todo: {
                    type: Object
                }
            },
        	template: '#test-template'
        }
    }
});