vue html data,javascript - Vuejs: V-HTML data binding of html data against eslint rule - Stack Overf...

As stated in the other answer, you can disable the warning but a good practice is to make sure the rule is rightfully disabled.

To do so, you can use dompurify that will parse the HTML you are giving to the browser, remove any malicious part and display it safely.

The issue is still there but you can use RisXSS which is an ESLint plugin that will warn the uses of v-html if you do not sanitize it before (in a sense, this is an improved version of vue/no-v-html ESLint rule).

To do so, install dompurify and eslint-plugin-risxss:

npm install dompurify eslint-plugin-risxss

Add risxss to your ESLint plugins then use DOMPurify:

id="foreignerBtn"

class="tabButton"

@click="foreignerClick"

v-html="sanitizedTextContent2"

>

id="foreignerBtn"

class="tabButton"

@click="foreignerClick"

v-html="textContent2"

>

import DOMPurify from 'dompurify';

export default {

data () {

return {

sanitizedTextContent2: DOMPurify.sanitize(textContent2)

}

}

}

Disclaimer: I am a contributor of RisXSS plugin.