2019年7月8日
2020年11月2日
【Vue.js】データをHTMLコードとして出力するには v-html ディレクティブを使う

2重中括弧の mustaches は、データを HTML ではなく、プレーンなテキストとして扱います。
そのため、<br> や <strong> が含まれたデータでもテキストとして出力されてしまいます。
<template lang="html">
<p>{{ text }}</p>
</template>
<script>
export default {
data: function() {
return {
text: '吾輩は猫である。<br>名前はまだない。'
}
}
}
</script>
// 出力
吾輩は猫である。<br>名前はまだない。
データをHTML として出力するには、v-html ディレクティブを使用する必要があります。
<template lang="html">
<p v-html=“text”></p>
</template>
(略)
// 出力 吾輩は猫である。 名前はまだない。
このように、 v-html を使って簡単にできます。
参考にしたページ:Vue.js公式サイト
まとめ
取得したJSONデータの中にHTMLコードが含まれていて、どうしてもHTMlコードとして出力させたくて方法を1週間ほど調べていました。
どんなにググっても答えに辿り着けず、諦めかけていたころにVue.jsのテンプレート構文の説明をみつけました。このページは以前一度目を通したのですが、綺麗に忘れていました。
Vue.js 公式サイトの中に答えがあるとは…!!
見つけた時は嬉しいやら悔しいやら…複雑な気持ちでした。

フォローお願いします