-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
동적컴파일 적용방법
22.06.21 12:17 작성 조회수 84
1
안녕하십니까
동적 컴파일에 대해 질문합니다
sample program
<template>
<div>
<div @click="testevent">Hello Hi</div>
{{ vueText }}
</div>
</template>
<script setup>
const vueText =ref('')
const testevent = () => {
vueText.value = 'good'
}
</script>
출력
Hello Hi
Hello 클릭을 하면
Hello Hi
good
이 sample program을 아래와 같이 변경하여 적용하면
<template>
<div>
<div v-html="renderData" />
{{ vueText }}
</div>
</template>
<script setup>
const vueText =ref('')
const renderData = '<div @click="testevent">Hello Hi</div>'
const testevent = () => {
vueText.value = 'good'
}
</script>
출력
Hello Hi 로 정상적으로 나타나나
Hello 클릭을 하면 무응답으로 나타남
무응답이유를 구글링해서 보면 renderData가 들어갈때 컴파일이 안되었기 때문이라는 결론 도출
해서 동적 컴파일을 npm i vue-runtime-template-compiler 설치하여 시도해보았으나
[Vue warn]: Failed to resolve component: RuntimeTemplateCompiler 표시만되고 동작하지 않음
질문사항
1. renderData가 컴파일이 안되어 무응답인지 ? 궁금하며
만약 그럴경우 동적 컴파일을 해서 넣어주는 방법이 무엇입니까 ?
2. vue-runtime-template-compiler 설치하고 nuxt에서 사용하는 방법어떻케 되는지 궁금합니다
수고하세요
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2022.06.22
안녕하세요, 먼저 v-html은 위와 같은 방식으로 사용하시면 안됩니다. HTML 컨텐츠를 화면에 파싱해 주는 용도로만 사용하셔야 하구요. v-html으로 뿌릴 문자열 안에 뷰 디렉티브나 문법을 들어가면 당연히 정상 동작 하지 않습니다 :)
답변 1