Vue.js recursive component

by Jonatas Walker

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js" integrity="sha256-Ab5a6BPGk8Sg3mpdlsHzH6khPkniIWsvEuz8Fv/s9X8=" crossorigin="anonymous"></script>

<div id="app">
  <tree :tree="friends" openclose="[-]"></tree>
</div>

<template id="tree">
  <div>
    <ul v-for="(tree, k, idx) in tree.childNodes">
      <node :tree="tree" :idx="idx"></node>
    </ul>
  </div>
</template>

<template id="node">
  <li>
    <div v-if="tree.childNodes.length">
      <span @click="seen = !seen">{{ tree.tagName }}</span>
      <span>{{ seen }}</span>
      <ul v-for="(node, k, id) in tree.childNodes">
        <node :tree="node" :idx="id"></node>
      </ul>
    </div>
    <div v-else>{{ tree.textContent }}</div>
  </li>
</template>

JavaScript

Vue.component('tree', {
	props: ['tree'],
  template: '#tree'
})
Vue.component('node', {
  props: ['tree', 'idx'],
  template: '#node',
  data: function() {
    return { seen: false }
  }
})

var appp = new Vue({
  el: '#app',
  data: function(){
    return {
      friends: '',
    }
  },
  beforeMount() {
    parser = new DOMParser();
    var response = "<scope><friend><name>Alex</name><hobbies><h>music</h><h>salsa</h></hobbies></friend><friend><name>Natasha</name><hobbies><h>hiking</h></hobbies></friend></scope>";
    xml = parser.parseFromString(response, 'text/xml');
    children = xml.getElementsByTagName('scope')[0];
    this.friends = children;
  }
})