Vue - v-html not displaying as HTML

Question

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>

Dan Knights · Accepted Answer · 2021-01-13 12:59:00Z

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, " 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 ' 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>

Thanks this looks like a regression in Vue 3. I've filed an issue github.com/vuejs/vue-next/issues/3001.

Mahamudul Hasan · Accepted Answer · 2021-01-13 12:43:55Z

0

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>';
              }
         ]
}"

answered Jan 13, 2021 at 12:43

Mahamudul Hasan

2,8232 gold badges19 silver badges26 bronze badges

Collectives™ on Stack Overflow

Vue - v-html not displaying as HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related