recherche

Maison  >  Questions et réponses  >  le corps du texte

Vue ajoute du contenu dans #document-fragment

<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>
P粉916760429P粉916760429490 Il y a quelques jours506

répondre à tous(1)je répondrai

  • P粉594941301

    P粉5949413012023-09-01 00:07:29

    J'ai résolu ce problème en utilisant ref sur la balise de modèle, puis en utilisant la fonction render. 

    <template id="some-id" ref="someRef">
</template>
    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.

    répondre
    0
  • Annulerrépondre