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.
Misal, kita memiliki data json:
Jika kita langsung menampilkan data pesan tersebut dari objek,
maka data akan keluar sesuai dengan valuenya. Artinya, kode HTML tidak di-render. Sehingga outputnya tetap:
Nah, untuk merender kode html dari json object dengan vue js adalah dengan menggunakan attribute v-html yang sudah disediakan oleh Vue JS
Otomatis kode html akan dirender.
Oke, sekian artikel singkat kali ini tentang cara render html dari value json object dengan vue js. Semoga bermanfaat! Terima kasih!
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!
Post a Comment