[Vuejs] v-html

v-html

 

 

👍 v-html

vue에서 html 그대로 적용시킬 경우, v-html 옵션을 이용해서 적용 가능하다.

ex) TextEditor(quill)에서 입력한 내용을 표시할 때, 값을 html 로 반환하기 때문에 html을 그대로 표시하기 위해서는 v-html을 이용한다.

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

<script>
export default {
	data: () => ({
    	contents: '<span>aaaa</span>',
    }),
}
</script>

• vue에서 v-html사용 시  XSS 공격 예방을 위해 eslint 에서 경고(warning)를 발생한다.

• 경고를 없애기 위해서는 코드 최상단에 아래 코드를 추가해주면 된다.
• 참고: https://github.com/vuejs/eslint-plugin-vue/issues/260

<!-- eslint-disable vue/no-v-html -->