如何禁用规则 [plugin:vite:vue] 重复属性

Question

我有一个使用 Vite 和 Storybook 设置的 Vue 3 应用程序。

我正在尝试为一个按钮使用两个 class 属性，我认为这是完全有效的：

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

运行项目 npm run storybook 给我

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

在哪里以及如何禁用此规则？

Answer 1

在 vue.js 中，一个元素上的相同属性不能有两个 v-bind。

在您的情况下，您放置了两倍的 classes 元素，这会导致 Duplicate attribute. 错误。

为了解决您的问题，我建议使用 computed 属性将您的类属性与您尝试添加的其他类属性合并。

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

并在模板中使用它：

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

如何禁用规则 [plugin:vite:vue] 重复属性

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

vue.js

vite