HerringtonDarkholme / vue-advanced-programming

A collection of tricks in Vue

Home Page:https://herringtondarkholme.github.io/vue-advanced-programming/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

how to use the v-outlet & v-template in a recursive treenode.

zuomingcai opened this issue · comments

how to use the v-outlet & v-template in a recursive treenode.
only the root node get rendered from the v-template.

<div class="ez-tree-node">
	<div class="ez-tree-node-self" @click="onItemClick">
		<span class="ez-tee-node-icon" :class="{'expanded':data.expanded,'hasChildren':data.hasChildren()}"></span>
		<v-outlet source="nodeTemplate" :$ctx="data">
			<span class="ez-tee-node-content">{{data.title}}</span>
		</v-outlet>
	</div>

	<div class="ez-tree-node-sub" v-if="data.hasChildren()" :class="{'expanded':data.expanded}">
		<span class="ez-tree-node-indent"></span>
		<span class="ez-tree-node-children">
			<template v-for="node in data.getChildren()">
				<ez-tree-node :data="node" />
			</template>
		</span>
	</div>
</div>


    <ez-tree-node :data="books">
        <v-template slot="nodeTemplate" inline-template>
            <span>
                {{$ctx.title}}
            </span>
        </v-template>
    </ez-tree-node>