[Vue] textarea 줄바꿈이 안되는 이유

문제

• textarea를 통해 글자를 입력하고, 서버로 보낸 뒤 다시 들고 왔을 때 줄바꿈이 안먹히는 현상이 발생했다.
  

원인

• textarea에서 개행문자는 \r\n, \n 으로 되어있기 때문에 웹에서는 줄바꿈이 먹히지 않는 것이었다.
• replace 함수를 통해 해당 개행문자들을 <br> 로 처리해주면 된다.

해결과정

1. replaceAll 메서드를 통해 개행문자들을 <br>로 치환시켜줬다.

// script
	this.babsangDescription =
  	this.babsangDetailData.dining_description.replaceAll(/(\n|\r\n)/g,'<br>');

// template
<div>{{ babsangDescription }}</div>

❗ 이렇게 들고와서 웹에 띄우니 <br>이 그대로 보임...

2. v-html 디텍티브를 통해 태그 문자열을 파싱해서 화면에 나타내도록 했다.

// template
  <div v-html="babsangDescription"></div>

성공~