[Vue/Vuetable] field 데이터가 html 형식일 경우 html 태그로 인식해버리는 현상 해결

버전은 다음과 같다.

 

vue.js	2
vuetable	2

 

Sonarqube의 rules 목록 조회 테스트 페이지를 만들기 위해 vuetable를 사용했다.

vuetable 적용 방법은 아래 포스팅 참고!

 

https://seongeun-it.tistory.com/286

[Vue.js] vuetable-2 적용

 

https://seongeun-it.tistory.com/299

[Vue.js] Vuetable pagination 적용

 

먼저 Sonarqube의 Rules 목록은 다음과 같이 조회된다.

 

그리고 문제의 화면은 다음과 같다.

 

원인

Sonarqube에서 보내주는 데이터를 vuetable 내부적으로 html 태그 자체로 인식해 버린 것이다.

개발자 도구로 확인해 보면 다음과 같다. 

검증

진짜로 vuetable에서 html 바꾸는지 검증을 해보자

데이터 확인 완료

일단 Sonarqube에서 응답 데이터를 어떤 형식으로 오는지 확인해 보자

Sonarqube에서는 문자열로 잘 보내주고 있음 -> vuetable에서 내부적으로 html 태그로 인식하고 있음

Vuetable 사용하지 않을 경우

Vuetable을 사용하지 않을 때는 다음과 같이 정상적으로 데이터 확인됨 -> 당연함..^.ㅜ sonarqube는 데이터를 잘 보내주고 있으니까요..

 

해결방법

Special Field - Field Slot로 해결

Field Slot이란?
vuetabel에서 필드 렌더링을 쉽게 커스터마이즈 할 수 있도록 자식 요소에 slot 이름을 지정하고, 이걸 vuetable Field 정의한 곳의 name option과 일치시키면 vuetable은 자동으로 칼럼 이름과 일치한 scoped slot(=sonar-rule-slot)를 찾게 된다.

형식은 다음과 같다.

<div slot="[slot 이름]" slot-scope="props">
  {{ props.rowData.~ }}
</div>

 

sonarqube/AppSonarRuleList.vue

<vuetable
  ref="vuetable"
  :api-url="this.setURLPath()"
  :fields="fields"
  data-path="rules"
  pagination-path=""
  class="table table-hover table-height"
  @vuetable:pagination-data="onPaginationData"
>
  <div slot="sonar-rule-slot" slot-scope="props">
    {{ props.rowData.name }}
  </div>
</vuetable>

위의 코드를 보면 data-path는 rules를 fields는 fields를 바라보고 있다. (별도의 파일로 정의하였음) 

상세 설명은 컴포넌트 등록 부분을 참고하면 된다. sonar-rule-slot와 같이 slot이름을 지정하고, 필드를 정의한 곳(SonarRuleFiledsDef.js)의 name 옵션의 이름과 일치시킨다(slot이름은 임의로 지으면 되고, name 옵션이랑 일치하기만 하면 됨) 그리고 props.rowData.~ 형식으로 데이터에 접근한다. 나는 name이라서 props.rowData.name으로 하였다.

 

vueTableDef/SonarRuleFiledsDef.js

{
    name : "sonar-rule-slot",
    title : "name",
    width : "20%",
  },

 

 

정상 적용 화면

다음과 같이 정상적으로 조회된다.

 

아직 Field slot 개념을 정확하게 이해하긴 어렵지만, vuetable의 데이터를 원하는 형식으로 가공할 수 있는 것으로 느껴진다. 

 

 

Refs.

https://www.vuetable.com/guide/special-field.html#field-slot

Special Field | Vuetable-2