[Vuejs]-How to disable rule [plugin:vite:vue] Duplicate attribute

by

0👍

✅

In vue.js, you can’t have two v-bind for the same attributes on one element.

In your case you are putting twice the classes elements wich results in the Duplicate attribute. error.

To solve your problem, I would recommand mergind your classes attributes using a computed properties with the other classes you are trying to add.

export default {
   computed: {
      mergedClasses(){
         return {...this.classes,
            'bg-gray-100': disabled,
            'cursor-not-allowed': disabled,
            'inline-block': block,
            'w-full': block,
        }
      }
   }
}

And use it in the template :

<button 
        :id="id"
        :type="type"
        @click="onClick"
        :class="mergedClasses"
        :class="{
            'bg-gray-100': disabled,
            'cursor-not-allowed': disabled,
            'inline-block': block,
            'w-full': block,
        }" 
        :disabled="disabled">{{ text }}<slot/></button>

Leave a comment