[Vuejs]-Toggle different elements using Vue

by

0👍

✅

The most straightforward way is to keep all your tooltips and their properties (clicked, content, etc.) in the data() part of your Vue app.

<script>
...
data() {
  tooltips: [
    {
      content: content1,
      isClicked: false
    },
    {
      content: content2,
      isClicked: false
    }
  ]
},
...
</script>

Now you can easily render all these tooltips in the template part.

<div v-for="tooltip in tooltips" v-if="tooltip.content > 0" class="c-tooltip">
      <a @click="clickTooltip(tooltip)" class="c-tooltip--link">
          {{ $label('toolTipLink') }}
      </a>
      <div v-if="tooltip.clicked" class="c-tooltip--content">{{tooltip.content}}</div>
</div>

Notice above how we are using tooltip in a dynamic way as the ‘current element’.

Last but not least, we need to take care of the clickTooltip method that we use for clicking. It’s more elegant and readable to separate it in a method in the script part:

<script>
...
methods: {
  clickTooltip(tooltip) {
    tooltip = !tooltip
  } 
}
...
</script>

Leave a comment