How to hide div with Vue.js

Question

I want to be able to hide a div with Vue, with as little impact on performance as possible, since it's a couple of divs on the website that will be treated this way. How do I do this?

Hide div > Display it when clicking on another div: (Example (without Vue))

With Vue (not working)

html

<div id="app" v-on:click="seen = !seen" class="control">
    <p>click app</p>
</div>

<div v-if="seen" id="hide">
<p>hide me </p>
</div>

JavaScript

new Vue({
    el:'#hide',
    data:{
        seen: false
    }
})

@Ferrybig You are right... I forgot to include the important part... — josefdev
– josefdev, Commented Feb 2, 2018 at 8:44
Vue cannot toggle the show/hide status of the root element, as vue needs to have at least 1 root element — Ferrybig
– Ferrybig, Commented Feb 2, 2018 at 8:45
@Ferrybig Ok, I get it, it's only possible to hide the elements within a div, but not the div itself. — josefdev
– josefdev, Commented Feb 2, 2018 at 8:47

one-hand-octopus · Accepted Answer · 2020-02-03 04:02:47Z

34

As @Ferrybig stated, Vue only has control over the element it's bound to and all of those child elements. Your hide element is outside the element bound to Vue (app) so Vue cannot change it.

With a slight change, your code works fine:

new Vue({
el:'#wrapper',
data:{
    seen: true
}
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="wrapper">
  <div id="app" v-on:click="seen = !seen" class="control">
      <p>click app</p>
  </div>
        
  <div v-if="seen" id="hide">
      <p>hide me </p>
  </div>
</div>

edited Feb 3, 2020 at 4:02

one-hand-octopus

2,8231 gold badge30 silver badges71 bronze badges

answered Feb 2, 2018 at 13:07

PatrickSteele

14.7k2 gold badges55 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fuat Over a year ago

this solution is abit dangerous. Because with "v-if" the div element does not being rendering in the DOM. May be v-show is better.

Dave Mackey · Accepted Answer · 2023-08-30 18:52:57Z

18

I recommend either use "v-show" or ":class" for hiding component efficiently. I've had some weird situations, the v-show may cause the ag-grid component into bad data table however no problem when using ":class".

The template code could be:

<div v-show="seen" id="hide">
   <p>hide me </p>
</div>

Or

<div :class="{ hide: !seen }" id="hide">
   <p>hide me </p>
</div>

with CSS

.hide {
    visibility: hidden !important;
}

edited Aug 30, 2023 at 18:52

Dave Mackey

4,45221 gold badges84 silver badges147 bronze badges

answered Jun 21, 2020 at 6:48

Houcheng

2,91428 silver badges35 bronze badges

2 Comments

BitTickler Over a year ago

Is that .hide style defined by vue.js or do I have to do that in my css?

Houcheng Over a year ago

@BitTickler .hide is a css defined in your css file or if you want to only work locally, you can define in the specific .vue file.

Rafiq · Accepted Answer · 2020-06-06 08:33:23Z

You can use v-if-else or v-show, they work in different ways. v-if, v-else will attach/detach your HTML element to its root element. On the other hand, v-show will work with style="display:none;",

example: v-if, v-else

<body>
    <div id = 'app'>
        <button @click="show = !show">Click</button>
        <p v-if="show"> 
            v-if value of show is: {{show}}
        </p>
        <p v-else> 
            v-else value of show is: {{show}}
        </p>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: function(){
                return{
                    show: true
                }
            }
        });
    </script>
</body>

example v-show

<body>
    <div id = 'app'>
        <button @click="show = !show">Click</button>
        <p v-show="show"> 
            v-show works with style="display:none;"
        </p>

    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data: function(){
                return{
                    show: true
                }
            }
        });
    </script>
</body>

suyanhanx · Accepted Answer · 2018-02-05 08:50:31Z

4

An vue instance has its own scope.Only in its scope, it can control the element.You need to focus on the element which be mounted.And one instance, one root element.

answered Feb 5, 2018 at 8:50

suyanhanx

986 bronze badges

4 Comments

BitTickler Over a year ago

Can you elaborate? Multiple instances are okay and if you have, say 2 instances, you can invoke setters from one instance to the other: methods... toggleViewX: function () { viewX.$data.isShow = !viewX.$data.isShow } ...}

suyanhanx Over a year ago

While Vue's $data property allows direct access to the data within a component instance, it is not widely recommended for extensive use in practical development. Using the $data property to access data can make the code harder to maintain and introduce potential issues. You may use $refs, lift the state, or invoke the setter using some functions that are passed to the children. These methods align better with Vue's design principles and help improve code maintainability and extensibility. @BitTickler

BitTickler Over a year ago

And how do you do that if you have multiple app instances, which was the topic of my comment above? The same topic arises, btw, if the completion function of an e.g.. XMLHttpRequest is executed in a null environment.

suyanhanx Over a year ago

I'm not quite sure what you mean. I saw your comment above, this is actually what v-show does, it will do it by directly modifying the display property of the element's inline style to none to not display the element. Also, please check out the Vue's documentation.

Collectives™ on Stack Overflow

How to hide div with Vue.js

4 Answers 4

1 Comment

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related