쿼리에서 얻은 데이터에 팝오버 하이라이트 태그를 생성하려고 합니다.현재 텍스트 내에서 괄호로 둘러싸인 서브스트링을 찾아 컴포넌트로 대체하려고 했지만 Vue가 새로운 컴포넌트를 렌더링 및 마운트하는 방법을 찾을 수 없습니다.
예제 텍스트:
Lorem {ipsum} dolor sit amet, consectetur {adipiscing} elit, sed do eiusmod tempor incididunt 괄호로 둘러싸인 텍스트를 찾아서 잡기 위한 꽤 간단한 regex를 만들었습니다.
{(.[^{}]*)} 제가 지금까지 시도한 코드는 다음과 같습니다.
<template>
<span v-html="paragraphText"></span> </template>
<script lang="ts"> import {MyComponent} from '#components';
export default defineComponent({
data () {
return {
paragraphText: '',
}
},
created () {
const re = /{(.[^{}]*)}/g;
let newText = `${this.text}`;
let match: RegExpExecArray;
do {
match = re.exec(newText);
if (match) {
newText = newText.replace(
match[0],
`<MyComponent ref='${match[1]}' style='font-weight:bold;'>${match[1]}</MyComponent>`
);
}
} while (match);
this.paragraphText = newText;
},
components: {
MyComponent,
} }) </script> 잘 알고 있습니다v-htmlXSS 공격을 피하기 위해 컴포넌트를 렌더링하는 것은 아닙니다.대부분은 제가 달성하려고 하는 것을 보여주기 위해서입니다.
각 컴포넌트 뒤에 컴포넌트가 있는 이유는 컴포넌트가 호버로 웹 요청을 하여 강조 표시된 단어에 대한 추가 정보를 가져오도록 하기 위함입니다.
가능한 한 깨끗하고 효율적인 솔루션을 찾고 있습니다.옵션 API일 필요는 없습니다.
질문에 대한 답변
이것이 깨끗한지는 잘 모르겠지만, 당신이 원하는 대로 해야 합니다.죄송합니다.구성 API입니다만, 옵션 API로 변환하는 것은 매우 간단합니다.
const { createApp, ref, computed } = Vue;
createApp({
setup() {
const data = ref("Lorem {ipsum} dolor sit amet, consectetur {adipiscing} elit, sed do eiusmod tempor incididunt");
const magic = computed(() => data.value.split('}').map(v => v.split('{')));
return { data, magic };
} }).mount('#app');.this.would.be.your.component.rather.than.a.span {
background-color :#ffdddd; }<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<span v-for="([text, tag], i) in magic" :key="i">
<span v-if="text.length">{{ text }}</span>
<span class="this would be your component rather than a span" v-if="tag?.length" :title="`this is tag: ${tag}`">{{ tag }}</span>
</span> </div>