[Vuejs]-How do I toggle (hide/unhide) child elements of dynamically added components with v-for

by

1👍

✅

You can simply put an extra variable on each of your cards. Then you can do something like this:

  <div id="dashboard">
    <ul class="collection with-header">
      <li class="collection-header"><h4>Cards</h4></li>
      <li v-for="card in cards" v-bind:key="card.id" class="collection-item">
        <div class="chip" @click="card.shown = !card.shown>{{card.group_name}}</div>
        <ul class="collection with-header" v-show="card.shown">
          <li v-for="(value, index) in card.group" v-bind:key="index" class="collection-item">
            <ul>
              <li>
                front: {{value.front}}
              </li>
              <li>
                back: {{value.back}}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

Obviously, you have to alter your variable cards so it contains the shown attribute by default. As an alternative, you can set up a different variable that contains the shown status and use some unique id to look up the value instead.

👤Sumurai8

Leave a comment