Vue: Feature : v-show modifier for toggling visibility

Created on 23 Feb 2016 · 9Comments · Source: vuejs/vue

It would be nice to be able to do:

<div v-show.visible="bool"></div>

... to toggle between visibility:hidden and visibility:visible.

My use case is an element with a transition. When the element transitions out, I'd prefer for the space it took up to not collapse.

Source

weotch

👍31

Most helpful comment

how does this work in 2.0?

bennyschudel on 20 Feb 2017

👍30 😕4

All 9 comments

You could create a custom directive for that and use the instance properties (this.modifiers) to get the v-directive.modifier.

The only thing i can not really make out right now is if you can override the v-showdirective.

Edit: you can override the show directive:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Directive Test</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="directivetest">

    </div>


    <script>
        Vue.config.debug = true;
        Vue.directive('show', function (value) {
          console.log('overridden directive value: ' + value);
          console.log('overridden directive modifiers:');
          console.log(this.modifiers);
        });

        Vue.component('comp', {
            template: '<div class="my-component" v-show.visible="true" />Component</div>',
        });

        new Vue({
            el: '#directivetest',
            template: '<div class="container"><comp></comp></div>',
        });
    </script>
</body>
</html>

vuchl on 24 Feb 2016

👍2

@weotch is opacity: 0; different to visibility: hidden; for your use case?

simplesmiler on 24 Feb 2016

It's probably better to just create your custom directive like v-visible. Unfortunately the internal transition API is not exposed at the moment, but it will be in the next release and you will be able to achieve what you want using this function exposed as Vue.transition.applyTransition().

yyx990803 on 24 Feb 2016

👍1

@vuchl Thanks for the input, but I don't believe that solution would trigger transitions like normal v-show does.

@simplesmiler no, those would be equivalent for my use case.

@yyx990803 I don't think a custom directive would work because I wouldn't be able to communicate to the transition system to do an enter / leave. But cool to know about that new API, thanks!

weotch on 24 Feb 2016

@weotch if changing the opacity is what you want, then you can do it with a simple class toggle with CSS transitions instead of using v-show.

yyx990803 on 24 Feb 2016