Render HTML Dari Json Object Dengan Vue JS

cara render json yang berisi kode html - Halo! Kali ini saya akan memberikan tutorial singkat mengenai cara menampilkan data json yang berisi value html di frontend, terkhusus dengan menggunakan framework vue js.

JSON Api HTML Vue JS

Misal, kita memiliki data json:

var data = [
   {
      pesan: "<p style='color:green'>Contoh Pesan Dengan tag HTML</p>"
   }
]

Jika kita langsung menampilkan data pesan tersebut dari objek,

{{data.pesan}}

maka data akan keluar sesuai dengan valuenya. Artinya, kode HTML tidak di-render. Sehingga outputnya tetap:

<p style='color:green'>Contoh Pesan Dengan tag HTML</p>

Nah, untuk merender kode html dari json object dengan vue js adalah dengan menggunakan attribute v-html yang sudah disediakan oleh Vue JS

<div v-html="data.pesan"></div>

Otomatis kode html akan dirender.

Baca Juga: Cara Menambah Atribut HTML Secara Kondisional di Vue JS

Oke, sekian artikel singkat kali ini  tentang cara render html dari value json object dengan vue js. Semoga bermanfaat! Terima kasih!