[Vue.js] 데이터를 불러올 때 '&'가 '&amp'로 출력되는 문제

 

기존 코드

<p>
    {{ brandInfo.master_category_desc }} - {{ brandInfo.category_desc }}
</p>

 

DB에서 데이터를 불러와서 vue.js로 출력하려고 할 때 '&'가 '&'로 출력되는 문제가 있었다.

'&'는 '&' 문자의 HTML 엔티티 코드 (특수 문자를 표현하는 문자열)인데,

특정 상황에서 '&' 문자가 엔티티 코드로 변환되어 나타나면서 발생하는 문제라고 한다.

 

 

해결

<p v-html="brandInfo.master_category_desc + ' - ' + brandInfo.category_desc"></p>

 

'v-html'은 문자열 안에 포함된 HTML 엔티티 코드를 실제 HTML 요소나 문자로 해석하여 렌더링한다.

이를 통해 해당 문제를 해결할 수 있었다.