Recursive Component Vue.js

Example of Recursive in VueJS

by irfandyjip89

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <recursive :depth="0"></recursive>
</div>

<template id="recursive">
  <div>
    <p>Depth: {{depth}}</p>
    <recursive v-if="depth < 10" :depth="depth + 1"></recursive>
  </div>
</template>

JavaScript

Vue.component('recursive', {
  props: ['depth'],
	template: '#recursive'
});

new Vue({
	el: '#app',
});