Search code examples
cssvue.jsvuejs2vue-componentdisplay

VUE JS - How to hide a div by default? And if user clicks on button then it should display using vue

Below is my complete code And here I am trying to hide the "v-show" by default. It should in hidden state by default and when the user clicks on button then it should display. I have used "display:none" css property for hiding the div default but it is not working. How can we solve this?

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div id="hide" v-show='toggle'>showing</div>
</div>

<script>
new Vue({
 el: '#app',
 data () {
   return {
     toggle: true
   }
 },
})
</script>

css

#hide {
    display:none;
}
Solution

  • You have defined toggle: true in component definition and you are using v-show='toggle' in template. But your css style always adds display:none; to #hide element.

    What does v-show does?

    When the condition inside the v-show eveluates to false, it will add display: none inline style to element and if it evaluates to true, it will remove the display: none. To be more simple, it just add and remove display: none from your element style. Its not adding any display: block or something to make your element visible.

    Your element is always hidden with the CSS code you have added for #hide element. So even if v-show evaluates to true, it just removes the display: none inline style added. Your css code will always keeps display: none due to the style added for #hide. That means your component will always be hidden.

    Fix

    Remove the css style. Depend only on v-show='toggle'

    Working Fiddle.

    new Vue({
  el: '#app',
  data() {
    return {
      toggle: false
    }
  },
})
    /* #hide {
  display:none;
} */
    <script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div id="hide" v-show='toggle'>showing</div>
</div>