Search code examples
javascriptvue.jsvuejs2toggle

title toggle disappears on click

Trying to make a toggle work that open/closes content. Opening the content works but somehow the button with the title disappears. Why?

<script>
const show = ref(false);
</script>

<template>
  <div class="w-full md:w-1/2 mx-auto my-12 border-8 border-black">
    <button v-if="!show" class="bg-blue-500" @click="show = true">
      <h2>Hello title, click to open or close content</h2>
    </button>
    <div v-show="show" class="bg-red-500">
      <p>The content becomes available when you click to open, and is hidden when clicked again to close.
    </div>
  </div>
</template>

Why the title disappears and how to fix that?

Solution

  • The title disappears when you click it because the v-if expression, !show, evaluates to false and thus the element would be removed from the DOM. Consider removing the v-if attribute from the <button> element if you would like it to always be displayed.