Vue: Problem with v-bind:class in Microsoft Edge for components

Created on 27 Dec 2019 · 4Comments · Source: vuejs/vue

Version

2.6.10

Reproduction link

https://codepen.io/yamelkaya/pen/KKwvdrY

Steps to reproduce

Open codepen example. There are 3 components test-x on the page which set text color and background. Each label tells about text color and background.

Chrome: everything works as expected

Edge 18: 1st and 3rd labels have incorrect color

What is expected?

1: red text on yellow bg
2: red on gray
3: black on yellow

What is actually happening?

1: black on gray
2: red on gray
3: black on gray

browser quirks bug contribution welcome has workaround

Source

yamelkaya

All 4 comments

Seems like a browser quirk that was fixed later on:

Screen Shot 2019-12-27 at 15 11 28

As a workaround, you can use inheritAttrs: false and add v-bind="$attrs" to the h3 element

posva on 27 Dec 2019

if i wanted to help on this issue what could I do?

dagadbm on 23 Jan 2020

@posva, I was going to fix this but I noticed that this is due to an issue on Codepen.io. If you open the provided pen on Edge and go to the console, you'll see an error in there. If you edit something in the pen, you won't see the changes reflected in the output panel because of that error.

I grabbed the code and put it in my local as well as on codesandbox.io and everything worked just fine on Edge.

Here are some screenshots:
codesandbox.io