Vue.js recursive component

by John Award

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="here">
      <recursive :d="friends" openclose="[-]"></recursive>
    </div>

    <template id="recursive">
      <div>
        <ul v-if="d.children.length != 0">
          <li v-for="n in d.childNodes" @click="seen = !seen">
            <elname :text="n.tagName"></elname>
            {{ openclose }}
            {{seen}}
            <recursive :d="n" openclose="[-]"></recursive>
          </li>
        </ul>
        <ul v-else>
          <elname :text="d.textContent"></elname>
        </ul>
      </div>
    </template>

JavaScript

Vue.component('elname', {
  props: ['text'],
  template: '<span>{{ text }}</span>'
})


Vue.component('recursive', {
  props: ['d', 'liname', 'openclose'],
  template: '#recursive',
  data: function() {
    return {
      seen: true
    }
  }
  }
)

var appp = new Vue({
  el: '#here',
  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;
  }
})