简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Fragen und Antworten  >  Hauptteil

Vue fügt Inhalte im #document-fragment hinzu

<p>Ich verwende vue3 mit nuxt3 und möchte ein Vorlagen-Tag mit Inhalt im generierten <code>#document-fragment</code> hinzufügen. Der generierte HTML-Code sollte wie folgt aussehen: </p> <pre class="brush:php;toolbar:false;"><body> <template id="some-id"> #Dokumentfragment <div> ... </div> </template> </body></pre> <p>Wenn ich einfaches HTML verwende, funktioniert es großartig. In vue3 befindet sich das Element nicht innerhalb von <code>#document-fragment</code>, sondern darunter: </p> <pre class="brush:php;toolbar:false;"><body> <template id="some-id"> #Dokumentfragment <div> ... </div> </template> </body></pre> <p>Mein Vue3-Code sieht so aus (ähnlich dem HTML-Code): </p> <pre class="brush:php;toolbar:false;"><template> <v-app> <template id="some-id"> <div></div> </template> </v-app> </template></pre> <p>Gibt es eine Möglichkeit, Inhalte in das Element <code>#document-fragment</code> einzufügen? </p>
P粉916760429P粉916760429415 Tage vor444

Antworte allen(1)Ich werde antworten

  • P粉594941301

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

    我通过在模板标记上使用 ref 然后使用 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)
  }
})

    如果你想插入一个组件，你可以像这样使用它：

    const someRef: Ref<HTMLTemplateElement | undefined> = ref()
onMounted(() => {
  if (someRef.value?.content) {
    // @ts-ignore
    render(h(SomeComponent, { someProp: someValue }), someRef.value.content)
  }
})

    也许有更好的，但目前可行。

    Antwort
    0
  • StornierenAntwort