BootstrapVue 테이블에서 "<템플릿>의 예기치 않은 쓸모 없는 속성" 오류를 해결하는 방법

Question

이 질문은 여기에 제공된 StackOverflow 답변에 대한 후속 질문입니다.

이 BootstrapVue 테이블의 열 머리글에 위 첨자를 추가하는 방법은 무엇입니까?

BootstrapVue 테이블의 원본 코드입니다.

으아아아

BootstrapVue 테이블의 열 헤더에 위 첨자를 추가하는 방법에 대한 답변입니다.

으아아아

위 답변은 원본 코드에 적합합니다. 하지만 원래 키 이름이 (age) 之间有空格和 % 字符 (%age new)이면 답변이 작동하지 않습니다. 키 이름 사이에 공백이 있을 때의 코드입니다.

으아아아

키 이름 사이에 새 공백을 추가하면 해당 답변은

가 됩니다. 으아아아

다음 오류가 발생합니다.

으아아아

이 오류를 해결하는 방법은 무엇입니까?

저는 vue v2.6과 BootstrapVue를 사용하고 있습니다.

Answer 1

문자열 리터럴을 사용해 볼 수 있습니다

으아아아

또는 공백을 밑줄로 바꾸거나 CamelCase 이름 지정 키를 사용하세요

Answer 2

Vue는 두 가지 속성을 봅니다. #head(%age 和 new)="data": 이 속성은 먼저 HTML 속성으로 구문 분석된 다음 Vue 또는 Bootstrap-Vue의 구문 의미(괄호 및 대괄호)로 구문 분석됩니다. 문서에서는 "동적 매개변수 구문 제약 조건"(v2 Documentation, v3 Documentation)에서 이 동작을 설명하고 있으며, 속성 이름의 복잡성으로 인해 속성 이름이 완전히 동적이지 않더라도 적용됩니다.

비록 속성 이름은 허용되는 문자에 대해 꽤 편안하지만 공백을 벗어날 방법이 없으므로 갇히게 됩니다. 그러면 두 가지 옵션이 남습니다:

• 구성 요소 등에서 계산된 속성이나 데이터 값을 percentagePropertyName = "head(%age new)"，则可以使用语法 #[percentagePropertyName] 정의할 수 있는 경우.
• 필드 이름을 percentage_new。您可以轻松地将其映射到数据对象中，例如dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x }));.
와 같이 특수 문자가 없는 이름으로 변경하세요.