0

I make a get request and receive data. There is a property like:

<pre class="some-class" spellcheck="false">&lt;p&gt;SomeText&lt;/p&gt;
&lt;div class="article__image"&gt;
&nbsp;&lt;img alt="alt-text" src="null" data-src="/upload/images/11.jpg" class="img--responsive lazyload"&gt;
&lt;/div&gt;
</pre><p>&nbsp;&lt;br&gt;</p>

I render it like that:

<template>
  <div class="screen card">
    <div><pre v-html="text"></pre></div>
  </div>
</template>
  • I tried to render it with v-html, but it just rendered the text above.
  • I tried <div>{{ data }}</div> and the effect was the same.
  • I tried to put v-html into <pre></pre> and pre tag wasn't rendered as plain text, and divs, img, p were. It renders like that: enter image description here The rest of props renders fine, but no this one. Can somebody help me?
thirtythreeboas
  • 17
  • 1
  • 7

1 Answers1

0

If you want to render your data as HTML, you need to remove the HTML Escape Characters (&lt;, &gt, etc.), as they will be rendered as < and >.

Your HTML should then be valid. This here worked for me:

<template>
  <div class="screen card">
    <div>
      <div v-html="text"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: `
      <pre 
        class="some-class" spellcheck="false">
        SomeText
        
        <div class="article__image">
          <img alt="alt-text" src="null" data-src="/upload/images/11.jpg" class="img--responsive lazyload">
        </div>
      </pre>
      <p><br></p>
      `,
    };
  },
};
</script>

Result:

The text rendered as html

ioasjfopas
  • 149
  • 5
  • Thanks, but I can't get rid of it because I get it from backend – thirtythreeboas May 03 '23 at 12:07
  • @thirtythreeboas Then you need to replace the escape codes you get with the actual characters (`<` to `<`, etc.). Something like this: https://stackoverflow.com/questions/784586/convert-special-characters-to-html-in-javascript – ioasjfopas May 05 '23 at 13:22