Disable eslint error with Vuejs and v-html

Question

I use Nuxt 2 with Vue 2 and vuetify.

My vscode was updated and I am getting an eslint error with v-html.

The code is:

 <v-list-item-title
   v-html="`${parent.genFilteredText(item.nome)}`"
   >
 </v-list-item-title>  

and the error is:

    [vue/no-v-text-v-html-on-component]

Using v-html on component may break component's content.

Before this problem, I used <!--eslint-disable vue/no-v-html--> on top of my code and I had no problem

but now this is not enough.

I have tried

<!--eslint-disable vue/no-v-text-v-html-on-component--> 

but no look

Uproot

did you relint the file after adding the disable comment? you might also try disabling the rule app-wide in your eslint config. Within "rules": {} add "vue/no-v-text-v-html-on-component": 0 – Aminta

Answer 1

A simple way is,use v-html inside component!

 <v-list-item-title v-html="`${parent.genFilteredText(item.nome)}`>

 </v-list-item-title>

Change to one of the following modes.

<v-list-item-title>
    <span v-html="`${parent.genFilteredText(item.nome)}`"></span>
</v-list-item-title>

// OR
<v-list-item-title>
    <div v-html="`${parent.genFilteredText(item.nome)}`"></div>
</v-list-item-title>

// OR
<v-list-item-title>
    <p v-html="`${parent.genFilteredText(item.nome)}`"></p>
</v-list-item-title>

Denticle

Answer 2

<!-- eslint-disable-next-line vue/no-v-text-v-html-on-component --> in the line before the component worked for me:

<template>
    <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
    <Foo vhtml="myHtml" />
</template>

<!-- Rest of your Vue SFC -->

Magnetostriction