[Vue.js] 문자열 데이터 바인딩 줄바꿈하기 (바인딩된 문자열에 html 태그 적용하기)

 

 

위와 같은 화면을 출력하려고 한다. 그런데 위의 텍스트가 <template>에 있는 것이 아닌 

 

...(생략)
{ subTitle:
    "환불/취소 요청 시 먼저, 다음의 내용으로 접수하여 주세요.
    \n세부사항에 대한 확인이 필요합니다." }

 

이렇게 prop으로 상단 컴포넌트에서 넘어오는 데이터에 잡혀 있는 텍스트였다.

 

원래 코드는

 

<h3>{{ propsData.subTitle }}</h3>

 

 

이렇게 나타나던 것을 아래와 같이

 

{{ propsData.subTitle.replace("\n", "<br />") }}

replace 함수를 사용해서 JSON 데이터 개행 문자인 '\n'을 html 개행 태그인 '<br />'로 바꿔주었더니

 

응?

<br /> 태그가 그대로 잡히는 문제가 발생.

 

 

콧수혐 괄호 {{ }}는 바인딩되는 문자열을 문자열로만 인식하기 때문에 위와 같은 상황에선 적합하지 못하다. html 태그를 반영시키기 위해서는 콧수염 괄호 대신 v-html을 사용해야 한다. 

 

먼저 v-html을 사용하기 전에 스크립트 단의 computed 영역에 다음과 같이 입력해주었다. 

 

computed: {
	subTitle() {
    	return this.propsData.subTitle.replace("\n", "<br />")
	}
}

 

이제 computed에 선언되어서 데이터처럼 활용할 수 있는 subTitle을 아래와 같이 템플릿에 바인딩해주면,

 

<h3 v-html="subTitle"></h3>

 

 

위와 같이 원하던 모양대로 화면에 구현되었다.

 

혹시나 해서 다음과 같이 코드를 작성해보았더니 작동되지 않았다. 

 

<h3 v-html="modalProps.subTitle.replace("\n", "<br />")"></h3> // 작동하지 않음