반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 자료구조
- scss
- express
- ES6
- input
- nodejs
- 리액트
- mapGetters
- State
- sass
- storybook
- App.vue
- Vue transition
- Vue.js
- event
- CSS
- v-html
- TypeScript
- webpack
- HOC
- react
- 자바스크립트
- jsx
- 쉬운설명
- 댓글달기
- MySQL
- Vue
- Wecode
- vuex
- JavaScript
Archives
- Today
- Total
익명의 개발노트
[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 보간을 사용하고 사용자가 제공한 콘텐츠에서는 절대 사용하면 안됩니다.
반응형
'코딩일기 > TIL' 카테고리의 다른 글
[vue.js] vuex 상태변화시 리랜더링 안되는 현상(강제 리랜더링) (0) | 2020.01.29 |
---|---|
[vue.js] global 컴포넌트 특정 라우트 컴포넌트에서 안보이게 처리 (0) | 2020.01.23 |
[javascript] 값 존재 유무를 확인시에는 includes를 사용해라. (0) | 2020.01.10 |
[typescript] !, ? (0) | 2020.01.09 |
[typescript] vuex (0) | 2020.01.05 |
Comments