[vue.js] 모달창 메세지 두 줄 구현하기

분명히 백틱을 사용해서 두 줄로 보냈는데, 화면에서는 아래와 같이 한 줄로만 나온다.

 

콘솔로 확인한 모습

이런 경우 보내는 쪽에 <br/>을 넣어주고 받는 쪽에서 v-html로 바인딩시켜주면 해결 할 수 있다.

//데이터 보내는 쪽

{
 title: '수정하기',
 message: `수정은 최초 1회만 가능합니다.
 수정하시겠습니까?`,
 checkBtnName: '확인',
 flag:'modify',
},

//데이터 받는 쪽

<div class="description-modal-message" >{{modalMessage}}</div>

위의 내용을 아래와 같이 변경

//데이터 보내는 쪽

  {
    title: '수정하기',
    message: `수정은 최초 1회만 가능합니다. <br/>
    수정하시겠습니까?`,
    checkBtnName: '확인',
    flag:'modify',
  },

//데이터 받는 쪽

<div class="description-modal-message" v-html="modalMessage"></div>

v-html은 XSS취약점으로 쉽게 이어질 수 있으므로 최대한 이용을 자제하라고 아래 참조자료에 적혀있다.

웹사이트에서 임의의 HTML을 동적으로 렌더링하려면 XSS 취약점으로 쉽게 이어질 수 있으므로 매우 위험할 가능성이 있습니다.

신뢰할 수 있는 콘텐츠에서만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하면 안됩니다.

참고자료 : https://kr.vuejs.org/v2/guide/syntax.html