Skip to content
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

:class="undefined" causes class being rendered #3173

Open
wenfangdu opened this issue Feb 6, 2021 · 15 comments
Open

:class="undefined" causes class being rendered #3173

wenfangdu opened this issue Feb 6, 2021 · 15 comments
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. has PR A pull request has already been submitted to solve the issue 🐞 bug Something isn't working

Comments

@wenfangdu
Copy link

wenfangdu commented Feb 6, 2021

Version

3.2.6

Steps to reproduce

<template>
  <div :title="undefined" :class="undefined" :style="undefined">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore molestiae quod voluptas
    reprehenderit possimus nihil eligendi iure et esse aut, iste natus porro enim rerum cumque
    veniam quae! Quam, voluptatum.
  </div>
</template>

What is expected?

None of title, class, style should be rendered.

What is actually happening?

class is rendered, the same thing applies to null.

Additional info

This was fixed in v3.1.5 but is reproducible when using the latest commit.

@HcySunYang
Copy link
Member

I don’t think this is a bug, but it’s reasonable to optimize that behavior.

@HcySunYang HcySunYang added the 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. label Feb 6, 2021
@HcySunYang HcySunYang changed the title [Bug] :class="undefined" cause class being rendered :class="undefined" cause class being rendered Feb 6, 2021
@wenfangdu wenfangdu changed the title :class="undefined" cause class being rendered :class="undefined" causes class being rendered Feb 6, 2021
@wenfangdu
Copy link
Author

wenfangdu commented Feb 6, 2021

@HcySunYang

<template>
  <div :style="false" :class="false" :foo="false">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium modi
    repudiandae, illum sequi nemo est deleniti optio distinctio quaerat quasi
    dolores vitae aspernatur quisquam, voluptatibus quibusdam ullam, ipsum aut
    amet?
  </div>
</template>

If isButtonDisabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered element..

In vue ^2.6.10, the above code will render class too, could you please make a PR regarding that?

@HcySunYang
Copy link
Member

@wenfangdu
Copy link
Author

wenfangdu commented Feb 6, 2021

@HcySunYang Yes, I've known that, I guess this issue belongs to the vue 2 repo, I've created one there (vuejs/vue#11902).

Also,

If the bound value is null or undefined then the attribute will not be included on the rendered element.

The documented behavior is class wouldn't be rendered if it's null or undefined, so I think it is a bug.

@HcySunYang HcySunYang added the 🐞 bug Something isn't working label Feb 6, 2021
@posva
Copy link
Member

posva commented Feb 6, 2021

I think this was for performance reasons. There are no practical reasons to not remove class and it was highlighted in other issues in Vue 2 and dismissed already.
Definitely not a bug but worth checking if the perf implication still exists

@HcySunYang
Copy link
Member

Only call removeAttribute when the element does not have any class. In other cases, className is used. I think it's fine.

@Liwoj
Copy link

Liwoj commented Aug 24, 2021

I think this should be reopend as the fix in 7013e8f does not work. Problem is the value argument of patchClass is never null because all class values (including null, undefined etc) are converted into strings using normalizeClass by the compiler

@wenfangdu
Copy link
Author

@Liwoj Just tried, reproducible for me as well. Ping @yyx990803

@edison1105
Copy link
Member

edison1105 commented Aug 24, 2021

@Liwoj Just tried, reproducible for me as well. Ping @yyx990803

I made a repro

the value is empty string not null
image

@edison1105 edison1105 reopened this Aug 24, 2021
@wenfangdu
Copy link
Author

wenfangdu commented Aug 26, 2021

@edison1105 For :class="undefined" and :class="null", @vue/runtime-dom v3.1.5 removed it, whereas @vue/runtime-dom v3.2.4 kept it, which seems like a regression bug.

@edison1105
Copy link
Member

@edison1105 For :class="undefined" and :class="null", @vue/runtime-dom v3.1.5 removed class, whereas @vue/runtime-dom v3.2.4 kept it, which seems like a regression bug.

Good catch. Would you mind commit a new issue with a working repro?

@wenfangdu
Copy link
Author

@edison1105 I've updated the issue to reflect that, since the playground doesn't seem to keep the vue version, I included the repro for the latest commit.

@LinusBorg
Copy link
Member

@gokaybiz
Copy link

gokaybiz commented Sep 7, 2023

The issue still exists, does anyone have any solution?

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0024-attribute-coercion-behavior.md#drawbacks
https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings

when I use null, empty class property remains in the tag.

Vue version: 3.3.4

@pikax pikax added the has PR A pull request has already been submitted to solve the issue label Oct 21, 2023
@zhangenming
Copy link
Contributor

ping...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. has PR A pull request has already been submitted to solve the issue 🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

9 participants