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

I have a Vue 3 app set up with Vite and Storybook.

I am trying to use two class attributes for a button, which I believe is perfectly valid:

    <button 
        :id="id"
        :type="type"
        @click="onClick"
        :
        : 
        :disabled="disabled">{{ text }}<slot/></button>

Running the project, npm run storybook, gives me

[vite] Internal server error: Duplicate attribute.
  Plugin: vite:vue

Where and how do I disable this rule?

CodePudding user response：

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"
        :
        : 
        :disabled="disabled">{{ text }}<slot/></button>