Toggle button in dynamic/recursive structure

Question

I'm looping an array of element and I'd want to recursively display that element with given template

and then inside that template use button with toggle to show/hide deeper level template of Childs of given element (Child is also an Element)

<div v-for="(element in elements)">
    <MyTemplate :element="element"></MyTemplate>
</div>

Here's my template:

<template>
    <div>element.Name</div>
    <button @click="toggleSomehow">
        // I'd want to display it under that button when he's "showing"
        <MyTemplate :element="element.Child"></MyTemplate>
    </button>
</template>

But I'm not really sure how to do that SHOW/HIDE button without binding it with some property or array, but I'd rather want to avoid it because everything has to be kind of dynamic

Emīls Gulbis · Accepted Answer · 2019-08-21 12:13:23Z

1

You should add toggleable data to your MyComponent component like visible See example below

Vue.component('my-template', {
  template: '#my-template',
  props: {
    element: {
      type: Object,
      required: true
    }
  },
  
  data() {
    return {
      visible: false
    }
  },

  methods: {
    toggleVisible() {
      this.visible = !this.visible
    }
  }
});

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

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

<script type="text/x-template" id="my-template">
  <div>
    <div>{{element.name}}</div>
    <button @click="toggleVisible" v-if="element.child">toggle</button>
    <my-template v-if="visible" :element="element.child" />
  </div>
</script>

<div id="app">
  <my-template :element="{name: 'test', child: {name: 'child test'}}" />
</div>

answered Aug 21, 2019 at 12:13

Emīls Gulbis

2,0711 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Toggle button in dynamic/recursive structure

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related