搜尋

首頁  >  問答  >  主體

Vue 在 #document-fragment 中加入內容

<p>我將 vue3 與 nuxt3 結合使用，並希望在生成的 <code>#document-fragment</code> 中新增一個包含內容的範本標籤。產生的 HTML 應如下所示：</p> <pre class="brush:php;toolbar:false;"><body> <template id="some-id"> #document-fragment <div> … </div> </template> </body></pre> <p>當我使用純 html 時，效果很好。在 vue3 中，元素不在 <code>#document-fragment</code> 內部，而是在其下方，如下：</p> <pre class="brush:php;toolbar:false;"><body> <template id="some-id"> #document-fragment <div> … </div> </template> </body></pre> <p>我的vue3程式碼如下圖（類似html程式碼）：</p> <pre class="brush:php;toolbar:false;"><template> <v-app> <template id="some-id"> <div></div> </template> </v-app> </template></pre> <p>有什麼方法可以把內容放入<code>#document-fragment</code>元素嗎？ </p>
P粉916760429P粉916760429447 天前479

全部回覆(1)我來回復

  • 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)
  }
})

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

    回覆
    0
  • 取消回覆