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:
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's leading authorities on South East Asian nationalism and particularly on Indonesia.
Rendering:
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>
Maybe you can use v-html
<div class="book-title" v-html="book.volumeInfo.title">
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\ère >> Amortisseur arrière
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With