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>