Vue - v-html 不显示为 HTML

Question

这是我的应用程序的简单版本：

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');

我正在尝试将模型作为属性传递给我的组件，如下所示：

<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>

但是，它不会将文本显示为粗体，我不确定为什么。

示例 sn-p：

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/vue@3.0.2/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>

Answer 1

你不需要使用引号作为 HTML 实体，你可以像普通的 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/vue@3.0.2/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>

---

不过，如果出于某种原因需要使用 HTML 实体，" 不起作用，因为它已经用引号括起来并终止了字符串，即 "Invalid "string""。

如果相反，您使用单引号，它将工作，因为它是一个有效的字符串："Valid 'string'"。所以你可以使用' 代替它：

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/vue@3.0.2/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>

Answer 2

以这种方式更改您的模型数据

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