chamberlainpi/vuejs-deep-objects.html

## vuejs-deep-objects.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test HTML</title>
</head>
<body>

<div id="app">
    <h1>Hello World!</h1>
    <button v-on:click="changeDeepObject">Try Me ;)</button>

    <div class="deep">
        <comp v-for="deep in rootObj" v-bind:type="deep.type" v-bind:obj="deep"></comp>
    </div>
</div>

<div id="scripts">
    <template id="deep-tmp">
        <div class="deep">
            <comp v-for="deep in obj.deepObj" v-bind:type="deep.type" v-bind:obj="deep"></comp>
        </div>
    </template>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

    <script>

        var trace = console.log.bind(console); //Just old AS3 habits...

        registerComponents({
            comp: {
                props: ['type', 'obj'],
                template: '<div v-bind:is="type" v-bind:obj="obj"></div>'
            },

            deep: {
                props: ['obj']
            },

            apple: {
                props: ['obj'],
                template: '<div class="apple" :style="{color: obj.color}">Apple!</div>'
            },

            dog: {
                props: ['obj'],
                template: '<div class="dog">Dog! <b v-if="obj.bark">BARK!</b></div>'
            },

            nerd: {
                props: ['obj'],
                template: '<div class="nerd" v-on:click="obj.someFunc()">Nerd, click me</div>'
            }

        });

        var vm = new Vue({
            el: '#app',
            data: { rootObj: [] },
            methods: { changeDeepObject: changeDeepObject }
        });

        function registerComponents(compList) {
            _.keys(compList).forEach( function(compName) {
                var compData = compList[compName];

                //Assume a default template ID naming convention if no raw HTML is used:
                if(!compData.template) compData.template = '#'+compName+'-tmp';

                Vue.component(compName, compData);
            });
        }

        function changeDeepObject() {
            var specialDog;

            function barkToggle() {
                specialDog.bark = !specialDog.bark;
            }

            vm.rootObj = [
                {type: "apple", color: '#f00'},
                {type: "dog", bark: true},
                {type: "nerd", someFunc: function() {
                    alert("Yes, I am a nerd!");
                }},
                {type: "deep", deepObj: [
                    specialDog = {type: "dog", bark: false},
                    {type: "apple", color: '#822'},
                    {type: "nerd", color: 1 /* makes color watchable */, someFunc: function() {
                        var _this = this;
                        _this.type = "apple";
                        _this.color = "#08f";

                        setTimeout(barkToggle, 1000);
                        setTimeout(barkToggle, 1200);
                        setTimeout(barkToggle, 2000);
                        setTimeout(barkToggle, 2200);
                        setTimeout(function() {
                            _this.color = "#800";
                            trace(_this);
                        }, 3000);
                    }}
                ]}

            ];

            trace(vm.rootObj);
        }

    </script>
</div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test HTML</title>
	</head>
	<body>

	<div id="app">
	<h1>Hello World!</h1>
	<button v-on:click="changeDeepObject">Try Me ;)</button>

	<div class="deep">
	<comp v-for="deep in rootObj" v-bind:type="deep.type" v-bind:obj="deep"></comp>
	</div>
	</div>

	<div id="scripts">
	<template id="deep-tmp">
	<div class="deep">
	<comp v-for="deep in obj.deepObj" v-bind:type="deep.type" v-bind:obj="deep"></comp>
	</div>
	</template>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

	<script>

	var trace = console.log.bind(console); //Just old AS3 habits...

	registerComponents({
	comp: {
	props: ['type', 'obj'],
	template: '<div v-bind:is="type" v-bind:obj="obj"></div>'
	},

	deep: {
	props: ['obj']
	},

	apple: {
	props: ['obj'],
	template: '<div class="apple" :style="{color: obj.color}">Apple!</div>'
	},

	dog: {
	props: ['obj'],
	template: '<div class="dog">Dog! <b v-if="obj.bark">BARK!</b></div>'
	},

	nerd: {
	props: ['obj'],
	template: '<div class="nerd" v-on:click="obj.someFunc()">Nerd, click me</div>'
	}

	});

	var vm = new Vue({
	el: '#app',
	data: { rootObj: [] },
	methods: { changeDeepObject: changeDeepObject }
	});

	function registerComponents(compList) {
	_.keys(compList).forEach( function(compName) {
	var compData = compList[compName];

	//Assume a default template ID naming convention if no raw HTML is used:
	if(!compData.template) compData.template = '#'+compName+'-tmp';

	Vue.component(compName, compData);
	});
	}

	function changeDeepObject() {
	var specialDog;

	function barkToggle() {
	specialDog.bark = !specialDog.bark;
	}

	vm.rootObj = [
	{type: "apple", color: '#f00'},
	{type: "dog", bark: true},
	{type: "nerd", someFunc: function() {
	alert("Yes, I am a nerd!");
	}},
	{type: "deep", deepObj: [
	specialDog = {type: "dog", bark: false},
	{type: "apple", color: '#822'},
	{type: "nerd", color: 1 /* makes color watchable */, someFunc: function() {
	var _this = this;
	_this.type = "apple";
	_this.color = "#08f";

	setTimeout(barkToggle, 1000);
	setTimeout(barkToggle, 1200);
	setTimeout(barkToggle, 2000);
	setTimeout(barkToggle, 2200);
	setTimeout(function() {
	_this.color = "#800";
	trace(_this);
	}, 3000);
	}}
	]}

	];

	trace(vm.rootObj);
	}

	</script>
	</div>

	</body>
	</html>