vue.jsnuxt.jseslint

Disable eslint error with Vuejs and v-html


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


Solution

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