Vue.js中在map方法内插入HTML标签显示为纯文本问题咨询

问题原因 #

• Vue 的双大括号{{ }}插值默认会对内容做HTML转义，避免XSS安全风险，所以你拼接的HTML标签会直接以纯文本展示
• 就算你改用v-html指令渲染也无法满足需求，因为v-html插入的HTML内容不会被Vue编译，你写的@click.prevent事件指令不会生效，完全触发不了绑定的方法

正确实现方案 #

不要在JS逻辑里拼接HTML，直接用Vue的列表渲染指令v-for在模板层遍历输出内容，代码如下：

<template v-if="category.sub_category.length > 0">
  <td>
    <span 
      v-for="(sub, index) in category.sub_category" 
      :key="sub.subcategory_name"
    >
      {{ sub.subcategory_name }}
      <a href="" @click.prevent="showAssignModal(category)">
        ({{ sub.sub_sub_category.length }})
      </a>
      <!-- 最后一项不输出分隔逗号 -->
      <span v-if="index !== category.sub_category.length - 1">, </span>
    </span>
  </td>
</template>

补充说明 #

如果你的场景确实需要渲染动态HTML且没有自定义Vue指令、事件绑定需求，才可以用v-html，但需要确保渲染的HTML内容是可信的，避免XSS攻击风险，写法示例：

<td v-html="yourRenderedHtmlContent"></td>

该方案不适用于你当前需要绑定点击事件的场景。

内容的提问来源于stack exchange，提问作者Sead Lab