Vue menambah kandungan dalam #document-fragment
P粉916760429
2023-08-31 09:43:47
<p>Saya menggunakan vue3 dengan nuxt3 dan mahu menambah teg templat dengan kandungan dalam <kod>#document-fragment</code> yang dihasilkan. HTML yang dijana sepatutnya kelihatan seperti ini: </p>
<pre class="brush:php;toolbar:false;"><body>
<template id="some-id">
#serpihan-dokumen
<div>
...
</div>
</template>
</body></pre>
<p>Apabila saya menggunakan html biasa ia berfungsi dengan baik. Dalam vue3, elemen tidak berada di dalam <code>#document-fragment</code>
<pre class="brush:php;toolbar:false;"><body>
<template id="some-id">
#serpihan-dokumen
<div>
...
</div>
</template>
</body></pre>
<p>Kod vue3 saya kelihatan seperti ini (serupa dengan kod html): </p>
<pre class="brush:php;toolbar:false;"><template>
<v-app>
<template id="some-id">
<div></div>
</template>
</v-app>
</template></pre>
<p>Adakah terdapat sebarang cara untuk memasukkan kandungan ke dalam elemen <kod>#document-fragment</code> </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya menyelesaikan masalah ini dengan menggunakan ref pada teg templat dan kemudian menggunakan fungsi
render.const someRef: Ref<HTMLTemplateElement | undefined> = ref() onMounted(() => { if (someRef.value?.content) { // @ts-ignore render('div', someRef.value.content) } })Jika anda ingin memasukkan komponen, anda boleh menggunakannya seperti ini:
const someRef: Ref<HTMLTemplateElement | undefined> = ref() onMounted(() => { if (someRef.value?.content) { // @ts-ignore render(h(SomeComponent, { someProp: someValue }), someRef.value.content) } })Mungkin ada yang lebih baik, tetapi ia berfungsi buat masa ini.