Vue js. Recursive component ruins my life

user_5084982 0
Viewed 1843

I wanted to create a tree view from an XML file, and I did this. However, when I decided to make it more flexible I encountered some problems.

Here are my components:

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


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

and the Vue object looks like this:

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;
  }
})

I have this variable seen in recursive component

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

It must change its value @click event to hide a nested list (please, see the JSfiddle), but when it changes it updates its value IN SEVERAL components.

How to make its value be updated only in a particular component?

Here is a template:

<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}} <!-- it is just for testing purposes to illustrate how seen var changes -->
        <recursive :d="n" openclose="[-]"></recursive>
      </li>
    </ul>
    <ul v-else>
      <elname :text="d.textContent"></elname>
    </ul>
  </div>
</template>
vuejs2 vue.js recursion javascript
3 Answers

You have two issues:

  1. You need to use click.stop so that the click event doesn't propagate to parents
  2. You need a component inside your recursive to handle the toggling

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

Vue.component('recursive', {
  props: ['d', 'openclose'],
  template: '#recursive',
  components: {
    toggler: {
      data() {
        return {
          seen: true
        }
      },
      methods: {
        toggle() {
          this.seen = !this.seen;
        }
      }
    }
  }
});

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;
  }
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<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 is="toggler" v-for="n in d.childNodes" inline-template>
        <div @click.stop="toggle">
          <elname :text="n.tagName"></elname>
          {{ openclose }}
          <recursive v-if="seen" :d="n" openclose="[-]"></recursive>
        </div>
      </li>
    </ul>
    <ul v-else>
      <elname :text="d.textContent"></elname>
    </ul>
  </div>
</template>

user_3921020

Currently you have 1 seen variable on an element, which controls the state for all child-elements. So a click on any child will change the seen value in the parent and show/hide all children of this parent.

Solution 1

Change the type of your seen variable to an array - with the same length as the children array. And change your handler to @click="seen[i] = !seen[i]"

Solution 2

Move the click listener to the children. So put @click="seen = !seen" on your outermost div in the template and render the whole list only on v-if="d.children.length && seen"

Vue.component( 'recursive-list', {
  props: ["d"],
  data: () => ({ expand: true }),
  template: `<div style="margin: 5px">
    <div v-if="Array.isArray(d)"
      style="border: 1px solid black">
      <button @click="expand = !expand">Show/Hide</button>
      <template v-show="expand">
        <recursive-list v-for="e in d" :d="e" />
      </template>
      <p v-show="!expand">...</p>
    </div>
    <p v-else>{{d}}</p>
  </div>`
} )

new Vue({
  el: '#main',
  data: { d: ["Text", ["a","b","c"],[[1,2,3],[4,5,6],[7,8]]]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

<div id='main'>
  <h3>List:</h3>
  <recursive-list :d="d"></recursive-list>
</div>

user_30700620

I've some modifications on your structure, maybe it's not exactly what you need but I think will became more clear.

<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>

https://jsfiddle.net/jonataswalker/Lw52t2dv/

user_46404990
Related