Vue adds content in #document-fragment-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

Vue adds content in #document-fragment

P粉916760429 2023-08-31 09:43:47

266

<p>I'm using vue3 with nuxt3 and want to add a template tag with content in the generated <code>#document-fragment</code>. The generated HTML should look like this: </p> <pre class="brush:php;toolbar:false;"><body> <template id="some-id"> #document-fragment <div> ... </div> </template> </body></pre> <p>When I use plain html it works great. In vue3, the element is not inside <code>#document-fragment</code> but below it, like this: </p> <pre class="brush:php;toolbar:false;"><body> <template id="some-id"> #document-fragment <div> ... </div> </template> </body></pre> <p>My vue3 code looks like this (similar to html code): </p> <pre class="brush:php;toolbar:false;"><template> <v-app> <template id="some-id"> <div></div> </template> </v-app> </template></pre> <p>Is there any way to put content into a <code>#document-fragment</code> element? </p>

P粉916760429

reply all(1)

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

I solved this problem by using ref on the template tag and then using the render function.

const someRef: Ref = ref()
onMounted(() => {
  if (someRef.value?.content) {
    // @ts-ignore
    render('div', someRef.value.content)
  }
})

If you want to insert a component, you can use it like this:

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

There may be better ones, but it works for now.