Vue ajoute du contenu dans #document-fragment
P粉916760429
2023-08-31 09:43:47
<p>J'utilise vue3 avec nuxt3 et je souhaite ajouter une balise de modèle avec du contenu dans le <code>#document-fragment</code> généré. Le code HTML généré devrait ressembler à ceci : </p>
<pre class="brush:php;toolbar:false;"><body>
<id du modèle="some-id">
#document-fragment
<div>
...
</div>
</modèle>
</corps></pré>
<p>Lorsque j'utilise du HTML brut, cela fonctionne très bien. Dans vue3, l'élément n'est pas à l'intérieur de <code>#document-fragment</code> mais en dessous, comme ceci : </p>
<pre class="brush:php;toolbar:false;"><body>
<id du modèle="some-id">
#document-fragment
<div>
...
</div>
</modèle>
</corps></pré>
<p>Mon code vue3 ressemble à ceci (similaire au code html) : </p>
<pre class="brush:php;toolbar:false;"><template>
<v-app>
<id du modèle="some-id">
<div></div>
</modèle>
</v-app>
</template></pre>
<p>Existe-t-il un moyen de placer du contenu dans l'élément <code>#document-fragment</code> </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai résolu ce problème en utilisant ref sur la balise de modèle, puis en utilisant la fonction
render.const someRef: Ref<HTMLTemplateElement | undefined> = ref() onMounted(() => { if (someRef.value?.content) { // @ts-ignore render('div', someRef.value.content) } })Si vous souhaitez insérer un composant, vous pouvez l'utiliser comme ceci :
const someRef: Ref<HTMLTemplateElement | undefined> = ref() onMounted(() => { if (someRef.value?.content) { // @ts-ignore render(h(SomeComponent, { someProp: someValue }), someRef.value.content) } })Il y en a peut-être un meilleur, mais ça marche pour le moment.