Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue.js auto-convert HTML and Unicode entities

Tags:

vue.js

I'm building a simple book browsing app using the open Google Books API. The problem is that in the API response, there are quotes and unicode entities. Now, when rendering, Vue.js is converting the quotes to HTML entities, and while it's converting unicode back to text, it doesn't apply HTML tags where they should. Let me give you an example:

Pronunciation Guide for \u003cb\u003eElixir\u003c/b\u003e Aether: EE-ther Ananke: ah-NAN-key Agapi: ah-\u003cbr\u003e\nGAH-pee Apollyon: a-POL-ee-on Atropos: ah-TRO-poes Clothe: KL O-tho \u003cbr\u003e\nDaimon: DEE-mun Hematoi: HEM-a-toy Khalkotauroi: kal-koh-TOR-oy CHAPTER \u003cbr\u003e\n1 ALEX ...

The text above (from the raw API response) gets converted into this:

enter image description here

You can see that the <b> tags were left untouched. I can understand this because one decoding was definitely done (from Unicode to HTML), but how can I make it to actually interpret and apply the HTML?

Here's another example, where I'd like to convert a quote code to the actual quotation mark, but it doesn't happen:

Raw API response:

ABOUT THE AUTHOR Benedict Anderson is one of the world&#39;s leading authorities on South East Asian nationalism and particularly on Indonesia.

Rendering:

enter image description here

Here's the code I'm using in my component (rather simple):

<template>
    <div class="book-listing">
        <div class="book-image">
            <img :src="book.volumeInfo.imageLinks.smallThumbnail">
        </div>

        <div class="book-title">
            {{ book.volumeInfo.title }}
        </div>

        <div class="book-description">
            {{ book.searchInfo.textSnippet }}
        </div>
    </div>
</template>

<script>
    export default {
        props: [ 'book' ]
    }
</script>
like image 426
ankush981 Avatar asked Oct 15 '17 15:10

ankush981


2 Answers

Maybe you can use v-html

    <div class="book-title" v-html="book.volumeInfo.title">
like image 155
Ju-ri Jung Avatar answered Oct 30 '22 12:10

Ju-ri Jung


Btw - v-html sets the whole inner html content of element, if wonder if exists some simple way to use result as attribute:

// Amortisseur arri\&#232;re >> Amortisseur arrière 
function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}
like image 26
Peminator Avatar answered Oct 30 '22 14:10

Peminator