vue에서 textarea의 줄바꿈 글을 표현할 때

vue에서 textarea로 입력받은 값을 textarea 안에서가 아닌 일반 html에서 보여줄 때의 방법을 정리해본다.

줄바꿈이 들어간 경우 바로 html에 값으로 넣어주면 줄바꿈이 표시되지 않는데

이럴땐 아래 계산식 즉, computed를 이용하여 값을 정제해준다.

 

computed: {
    content() {
        return this.content.split('\n').join('<br>');
        //return this.content.replace(/(?:\r\n|\r|\n)/g, '<br>'); 정규식
    },
},

 

copputed를 작성 후, 해당 html이 들어간 content 값을 dom에 넣어야하는데
{{ 값 }}으로 넣어주면 string으로 표현되기 때문에 v-html을 같이 써줘야한다.

 

 

 

<p v-html="content"></p>

 

이렇게 하면 br 속성이 들어간 값이 표현이 된다.

다만 작업중 문제가 발생했다.
내가 br로 변경할 값은 배열에 들어가서 v-for문으로 돌려서 나오는 값이였다.
이때에 작업은 methods로 반영하였다.

 

methods: {
    getContent(content) {
        return content.split('\n').join('<br>');
    },
},

<!-- .. v-for="row in arr" -->
<p v-html="getContent(row)"></p>

methods를 이용하여 작업하여 for문의 값도 순조롭게 표현할 수 있었다.

 

 

 

 

*댓글과 좋아요는 힘이 됩니다.