leolin310148 · July 4, 2016 06:06
diff --git a/vue-expandable-layout b/vue-expandable-layout
 <!DOCTYPE html>
 <html>
 <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
 </head>
 <body>
 <div id="vue">
    <ul>
        <li v-for="family in myList">
            <expandable>
                <div slot="group">{{ family.name }}</div>
                <ul>
                    <li v-for="child in family.children">
                        {{ child }}
                    </li>
                </ul>
            </expandable>

        </li>
    </ul>
 </div>
 <script>
    Vue.component('expandable', {
        data(){
            return {
                isOpen: false,
            }
        },
        template: '<div><div @click="isOpen = !isOpen"><slot name="group"></slot></div><div v-show="isOpen"><slot></slot></div></div>'
    })

    var myList = [
        {
            "name": "Simpsons",
            "children": ["Bart", "Lisa"],
        },
        {
            "name": "Albert",
            "children": ["David", "Arturo", "Everett"],
        },
        {
            "name": "Brett",
            "children": ["Darrel", "Oliver", "Tamara"]
        },
    ];

    var vm = new Vue({
        el: "#vue",
        data: {
            "myList": myList
        },
        methods: {
            toggleOpen: function(family) {
                family.isOpen = !family.isOpen;
            }
        }

    });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<div id="vue">
	<ul>
	<li v-for="family in myList">
	<expandable>
	<div slot="group">{{ family.name }}</div>
	<ul>
	<li v-for="child in family.children">
	{{ child }}
	</li>
	</ul>
	</expandable>

	</li>
	</ul>
	</div>
	<script>
	Vue.component('expandable', {
	data(){
	return {
	isOpen: false,
	}
	},
	template: '<div><div @click="isOpen = !isOpen"><slot name="group"></slot></div><div v-show="isOpen"><slot></slot></div></div>'
	})

	var myList = [
	{
	"name": "Simpsons",
	"children": ["Bart", "Lisa"],
	},
	{
	"name": "Albert",
	"children": ["David", "Arturo", "Everett"],
	},
	{
	"name": "Brett",
	"children": ["Darrel", "Oliver", "Tamara"]
	},
	];

	var vm = new Vue({
	el: "#vue",
	data: {
	"myList": myList
	},
	methods: {
	toggleOpen: function(family) {
	family.isOpen = !family.isOpen;
	}
	}

	});
	</script>
	</body>
	</html>