javascript - Vuejs : V-HTML data binding of html data against eslint rule

Question

我正在使用以下方法绑定(bind)html并显示在我的页面中。它工作得很好，但是我从我的 eslint 收到警告说“v-html”指令可能导致 XSS 攻击。eslint(vue/no-v-html)

  <button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
      ></button>

然后我按照以下方法更改它。但我无法呈现 html 标签。

 <button
            id="foreignerBtn"
            class="tabButton"
            @click="foreignerClick"
          >{{ textContent2 }}</button>

Answer 1

正如 Decade Moon 提到的，如果传递给 v-html 的内容是经过净化的 HTML，您可以禁用该规则。
https://eslint.vuejs.org/rules/no-v-html.html
通过将 html 包装在

<!-- eslint-disable vue/no-v-html -->
<button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
      ></button>
<!--eslint-enable-->