noVueMultipleObjectsInClass (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noVueMultipleObjectsInClass
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-multiple-objects-in-class

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noVueMultipleObjectsInClass": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow more than one object in an array passed to :class.

In Vue, an object in a :class array adds each of its keys as a class when the matching value is truthy. Splitting these conditions over several objects in the same array makes it harder to see which classes depend on which conditions. Put them in a single object instead.

Examples

Invalid

1
<template>
2
  <div :class="[{ active: isActive }, { disabled: isDisabled }]" />
3
</template>

code-block.vue:2:16 lint/nursery/noVueMultipleObjectsInClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class array contains more than one object.
  
    1 │ <template>
  > 2 │   <div :class="[{ active: isActive }, { disabled: isDisabled }]" />
      │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Spreading conditional classes over several objects makes it harder to see which classes are applied and when.
  
  ℹ Merge the objects into a single object.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<template>
2
  <div v-bind:class="['button', { active: isActive }, { disabled: isDisabled }]" />
3
</template>

code-block.vue:2:22 lint/nursery/noVueMultipleObjectsInClass ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This class array contains more than one object.
  
    1 │ <template>
  > 2 │   <div v-bind:class="['button', { active: isActive }, { disabled: isDisabled }]" />
      │                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ </template>
    4 │ 
  
  ℹ Spreading conditional classes over several objects makes it harder to see which classes are applied and when.
  
  ℹ Merge the objects into a single object.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<template>
2
  <div :class="[{ active: isActive, disabled: isDisabled }]" />
3
  <div :class="['button', { active: isActive }]" />
4
  <div :class="{ active: isActive, disabled: isDisabled }" />
5
</template>