简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Vue menambah kandungan dalam #document-fragment
P粉916760429
P粉916760429 2023-08-31 09:43:47
0
1
469
<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粉916760429
P粉916760429

membalas semua(1)
P粉594941301
P粉5949413012023-09-01 00:07:29 Tingkat 1

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.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！