-
-
Notifications
You must be signed in to change notification settings - Fork 33.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v-show should be !important #3761
Comments
Please no. The !important level is already used in some components to purposely override Vue v-show behaviour. The current level as inline style is the most appropriate. Just put the condition on your visible- class instead of using v-show. It makes no sense to have a hidden element with some visible- classes anyway. |
As @sylvainpolletvillard said, if you want to apply |
@posva v-hide does not apply a class to the element when hidden. If it did this would be a non-issue. Wouldn't a class have to be applied via v-bind? Seems like a contrived way to go about hiding an element and would make v-hide completely useless when doing responsive design in a popular css framework. |
|
@posva Sorry I meant |
By applying classes I mean something like this: <div :class="{hide: hide}"></div> .hide {
display: none !important;
} Maybe a modifier to |
It would still be I do not know the reasons why Bootstrap |
@posva Yeah I understood what that meant. Like I said before I thought that seemed like a contrived way to do it and would defeat the purpose of having I'm remarking on the philosophy of the design choice. If the design is to allow components to override the show directive I argue that is a poor design choice if support for popular CSS frameworks is intended. This issue will return many times in the future from folks using responsive classes since it will simply look like I agree with @codysherman in that Vue should take precedence over something like a responsive class since the model should represent a more accurate picture of display intent. |
@sylvainpolletvillard correct me if I'm wrong, but wouldn't the |
I can agree to that, but:
Statically overriding a dynamic decision of Vue with
I can agree to that but think we don't want to introduce this as a default behaviour as it would be a breaking change. So we are left with @psova's suggestion of a modifier like v-show.important or telling people to build their own directive / use a class binding:
|
@BrainBacon Yes it will, because inline style has the highest specificity |
[email protected] perhaps? Having a mid-term solution like I think this behavior should be default in the future if we're talking about breaking changes. |
I personnally use this for @media print queries. I have some layout handled with Something like |
Seems like a lot of added complexity for something that is very common. You're depending on every designer to think about the interaction between the responsive logic and the model logic. |
I would say this is not Vue's problem, but Bootstrap's problem. It's Bootstrap using !important that forces everyone into this specificity war. If I were you I'd not use static CSS that has !important unless for very specific reasons like printing. And I don't think this is a common case. |
Here is a pure CSS solution that might help anyone caught in this dilemma out:
|
@yyx990803 It could be a Bootstrap's problem, but at the same time Bootstrap also has reasons to use Vue shouldn't change the default behaviour, and Bootstrap can't remove Another option could be adding a new global configuration property for this:
|
@codysherman that was cool |
Thank you very much @gijo-varghese, I'm very glad that I was able to help out! |
I know this is old, but I feel that I should add that it is not only Bootstrap's visability classes that interfer with My current solution is to use class bindings to add Bootstrap's display class with the same condition as <div v-show="someCondition" :class="{ 'd-flex': someCondition }">
<!--content-->
</div> |
I will use a template to include the element with Bootstrap's 'visible-*' classes or "d-flex" class. |
or you can put the "visible-*" class in v-bind:class like this:
Here is an example. |
I still think that between design and logic part, the logic should be given the priority. Bootstrap's |
I also ran into this. I had a component that I wanted to use v-show with, and he had a I ended up just moving the This didn't work: I moved it to a parent tag and it worked: |
Vue.js version
2.0.0-rc.7
Reproduction Link
http://codepen.io/codysherman/pen/qaArqJ?editors=1010
Steps to reproduce
Have an element already have an !important display trait, such as one of Bootstrap's 'visible-*' classes.
What is Expected?
Vue should hide the element based on the v-show.
What is actually happening?
Because v-show doesn't have an !important tag, it is overruled. In my opinion, in the event of a conflict, the tie should obviously go to Vue, as it is getting its logic dynamically. Angular's ng-show applies the !important tag for this reason.
The text was updated successfully, but these errors were encountered: