📘
【Nuxt】静的htmlファイルの読み込み、出力
与件
- サーバー内のhtmlファイルを読み込む
- htmlをページ上に出力する
コード
script
setup (props) {
const html = ref(null)
fetch('htmlファイルのURL')
.then(response => response.text())
.then((text) => {
html.value = text
})
})
return {
html
}
処理は以下のような流れです。
- fetchメソッドを使用して、URLからHTMLファイルを取得。
- response.textメソッドを使用して、テキストデータとして取得。
- テキストデータをhtml.valueプロパティへ代入して、HTMLファイルの内容を表示します。
template
<div v-html="html" />
v-htmlでバインディングして出力します。
Discussion