[Vuejs]-Vue – How to toggle an item's child across a list of DOM items?

by

0👍

✅

Given the fact that you have control over the rendering on the PHP side, I’d say utilizing a simple $index variable from your loop to hold access to a list of ID’s would be simple enough. If you can pass $index from the php method to the component, then you can utilize the below:

  <Item>
    <div>
      <a @click="$set(details, $index, !details[$index])">show details</a>
    </div>
    <div class="details" v-show="details[$index]">...</div>
  </Item>

Then hold reference to details in your component’s data definition:

data () {
  return {
    //...
    details: {}
  }
}

Note the usage of $set in the above allows us to creative a reactive property in our details object. Utilizing this approach means you are not required to define each index property on the details object.

Here’s a simple jsFiddle which should help give you a more visual idea of the approach.

Leave a comment