CODEWITHSUNDEEP
vue.jsvue-componentvuejs3
nfplee
nfplee

Reputation: 7977

Vue - v-html not displaying as HTML

Here's a simple version of my application:

const app = Vue.createApp({ });

app.component('list', {
  props: {
    model: {
      type: Object
    }
  },
  template: `<div v-for="widget in model.widgets">
    {{ widget.name }}
    <div v-html="widget.content"></div>
    <div v-html="widget.content2"></div>
    <div v-html="widget.content3"></div>
  </div>`
});

app.mount('#app');

I'm trying to pass the model as a property to my component, like so:

<div id="app">
  <list :model="{
    &quot;widgets&quot;: [
      {
        &quot;name&quot;: &quot;Test&quot;,
        &quot;content&quot;: &quot;&lt;strong&gt;Bold Text&lt;/strong&gt;&quot;,
        &quot;content2&quot;: &quot;<strong>Bold Text</strong>&quot;,
        &quot;content3&quot;: '<strong>Bold Text</strong>'
      }
    ]
  }"></list>
</div>

However, it doesn't display the text as bold and I'm not sure why.

Example snippet:

const app = Vue.createApp({});

app.component('list', {
  props: {
    model: {
      type: Object
    }
  },
  template: `<div v-for="widget in model.widgets">
        {{ widget.name }}
      <div v-html="widget.content"></div>
      <div v-html="widget.content2"></div>
    </div>`
});

app.mount('#app');
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <list :model="{
    &quot;widgets&quot;: [
      {
        &quot;name&quot;: &quot;Test&quot;,
        &quot;content&quot;: &quot;&lt;strong&gt;Bold Text&lt;/strong&gt;&quot;,
        &quot;content2&quot;: &quot;<strong>Bold Text</strong>&quot;
      }
    ]
  }"></list>
</div>

Upvotes: 2

Views: 2296

Answers (2)

Dan Knights
Dan Knights

Reputation: 8368

You don't need to use quotes as HTML entities, you can just structure it as normal JS:

const app = Vue.createApp({});

app.component('list', {
  props: {
    model: {
      type: Object
    }
  },
  template: `<div v-for="widget in model.widgets">
        {{ widget.name }}
      <div v-html="widget.content"></div>
      <div v-html="widget.content2"></div>
    </div>`
});

app.mount('#app');
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <list :model="{
    widgets: [
      {
        name: 'Test',
        content: '&lt;strong&gt;Bold Text&lt;/strong&gt;',
        content2: '<strong>Bold Text</strong>'
      }
    ]
  }"></list>
</div>

Though, if for some reason you needed to use HTML entities, &quot; doesn't work because it's already enclosed in quotes and terminates the string, i.e. "Invalid "string"".

If instead, you used single quotes, it would work as it's a valid string: "Valid 'string'". So you could use &apos; in it's place:

const app = Vue.createApp({});

app.component('list', {
  props: {
    model: {
      type: Object
    }
  },
  template: `<div v-for="widget in model.widgets">
        {{ widget.name }}
      <div v-html="widget.content"></div>
      <div v-html="widget.content2"></div>
    </div>`
});

app.mount('#app');
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <list :model="{
    &apos;widgets&apos;: [
      {
        &apos;name&apos;: &apos;Test&apos;,
        &apos;content&apos;: &apos;&lt;strong&gt;Bold Text&lt;/strong&gt;&apos;,
        &apos;content2&apos;: &apos;<strong>Bold Text</strong>&apos;,
        &apos;content3&apos;: '<strong>Bold Text</strong>'
      }
    ]
  }"></list>
</div>

Upvotes: 1

Mahamudul Hasan
Mahamudul Hasan

Reputation: 2823

change your model data this way

:model="{
      widgets:[
              {
                name: 'Test&quot',
                content: '&lt;strong&gt;Bold Text&lt;/strong&gt;',
                content2: '<strong>Bold Text</strong>';
              }
         ]
}"

Upvotes: 0

Related Questions