JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.5/vue.js"></script>
<div id="myel">
    <button type="button" v-on="click: doIt">Click me</button>
    <ul>
        <li v-repeat="obj.items" track-by="id">
            <p>{{name}}</p>
            <ul>
                <li v-repeat="subitems" track-by="id">
                    {{name}}
                </li>
            </ul>
        </li>
    </ul> 

</div>

JavaScript

new Vue({
    el: "#myel",
    data: function () {
        return {
            count: 4,
            obj: {}
        }
    },
    methods: {
        doIt: function () {
            
            var itemcount = this.count;
            this.count--;
            
            newobj = {};
            
            newobj.items = [];
            
            for (var i = 0; i < itemcount; i++) {
                //var subcount = Math.floor(Math.random() * (5 - 0)) + 0;
                var subcount = 2;
                if (i == 0 && itemcount == 4) {
                    subcount = 1;
                }
                item = {};
                item.name = "foo " + i;
                item.id = i;
                item.subitems = [];
                for (var j = 0; j < subcount; j++) {
                    subitem = {}
                    subitem.name = "foo sub " + i + "_" + j;
                    subitem.id = j;
                    item.subitems.push(subitem);
                }
                newobj.items.push(item);
            }
            
            this.obj = JSON.parse(JSON.stringify(newobj));
        }
    }
})