Vue: 구성 요소에 대한 Microsoft Edge의 v-bind : class 문제

에 만든 2019년 12월 27일 · 4코멘트 · 출처: vuejs/vue

버전

2.6.10

복제 링크

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

재현 단계

코드 펜 예제를 엽니 다. 페이지에는 텍스트 색상과 배경을 설정하는 3 개의 구성 요소 test-x 가 있습니다. 각 레이블은 텍스트 색상과 배경에 대해 알려줍니다.

Chrome: 모든 것이 예상대로 작동합니다.

Edge 18 : 첫 번째 및 세 번째 레이블의 색상이 잘못되었습니다.

무엇을 기대합니까?

1 : 노란색 bg에 빨간색 텍스트
2 : 회색에 빨간색
3 : 노란색에 검은 색

실제로 무슨 일이 일어나고 있습니까?

1 : 회색 바탕에 검은 색
2 : 회색에 빨간색
3 : 회색 바탕에 검은 색

browser quirks bug contribution welcome has workaround

출처

yamelkaya

모든 4 댓글

나중에 수정된 브라우저 단점처럼 보입니다.

Screen Shot 2019-12-27 at 15 11 28

해결 방법으로 inheritAttrs: false v-bind="$attrs" 를 사용하고 h3 요소에 v-bind="$attrs" 를 추가 할 수 있습니다.

posva 에 2019년 12월 27일

이 문제에 대해 돕고 싶다면 어떻게해야합니까?

dagadbm 에 2020년 01월 23일

@posva , 나는 이것을 고치려고했지만 이것이 Codepen.io의 문제로 인한 것임을 알았습니다. Edge에서 제공된 펜을 열고 콘솔로 이동하면 거기에 오류가 표시됩니다. 펜에서 무언가를 편집하면 해당 오류로 인해 출력 패널에 반영된 변경 사항을 볼 수 없습니다.

코드를 가져와 내 로컬과 코드 넣었고 모든 것이 Edge에서 잘 작동했습니다.

다음은 몇 가지 스크린 샷입니다.
codesandbox.io