cari

Rumah  >  Soal Jawab  >  teks badan

Vue menambah kandungan dalam #document-fragment

<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>
P粉916760429P粉916760429447 hari yang lalu480

membalas semua(1)saya akan balas

  • P粉594941301

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

    Saya menyelesaikan masalah ini dengan menggunakan ref pada teg templat dan kemudian menggunakan fungsi 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)
  }
})

    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.

    balas
    0
  • Batalbalas