【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 公式サイトの中に答えがあるとは…!!
見つけた時は嬉しいやら悔しいやら…複雑な気持ちでした。

フォローお願いします