useVueSingleEventPayload (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useVueSingleEventPayload
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- vue
Sources:
- Inspired from vue/prefer-single-event-payload

How to configure

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

Description

Require Vue component events to carry at most one value.

A component can send a value along with an event, as in emit('change', value), and it can send several, as in emit('change', value, extra). A parent that listens to the event with a handler written inline in its template, such as @change="onChange($event)", can only read the first value through $event. The other values are silently lost.

Put all the values in one object instead, as in emit('change', { value, extra }), so every listener receives all of them.

This rule checks the calls that emit an event: $emit() in templates, this.$emit(), the emit function that setup() receives, and the function returned by defineEmits(). It also checks the events declared in the emits option and in defineEmits(), when the declaration lists the values the event carries.

Calls whose event name is not written as a string, as in emit(eventName, a, b), are not checked.

Examples

Invalid

1
<script setup>
2
const emit = defineEmits(["change"]);
3

4
function onInput(value, extra) {
5
  emit("change", value, extra);
6
}
7
</script>

code-block.vue:5:25 lint/nursery/useVueSingleEventPayload ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The event change is emitted with more than one value.
  
    4 │ function onInput(value, extra) {
  > 5 │   emit("change", value, extra);
      │                         ^^^^^
    6 │ }
    7 │ </script>
  
  ℹ A listener written inline in a template, such as @change="onChange($event)", can only read the first value through $event. The other values are lost.
  
  ℹ Put all the values in one object, and send that object instead.
  
  ℹ 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
<script>
2
export default {
3
  emits: {
4
    change: (value, extra) => value !== null,
5
  },
6
};
7
</script>

code-block.vue:4:21 lint/nursery/useVueSingleEventPayload ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The event change is declared with more than one value.
  
    2 │ export default {
    3 │   emits: {
  > 4 │     change: (value, extra) => value !== null,
      │                     ^^^^^
    5 │   },
    6 │ };
  
  ℹ A listener written inline in a template, such as @change="onChange($event)", can only read the first value through $event. The other values are lost.
  
  ℹ Put all the values in one object, and send that object instead.
  
  ℹ 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
<script setup lang="ts">
2
defineEmits<{
3
  change: [value: string, extra: number];
4
}>();
5
</script>

code-block.vue:3:27 lint/nursery/useVueSingleEventPayload ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The event change is declared with more than one value.
  
    1 │ <script setup lang="ts">
    2 │ defineEmits<{
  > 3 │   change: [value: string, extra: number];
      │                           ^^^^^^^^^^^^^
    4 │ }>();
    5 │ </script>
  
  ℹ A listener written inline in a template, such as @change="onChange($event)", can only read the first value through $event. The other values are lost.
  
  ℹ Put all the values in one object, and send that object instead.
  
  ℹ 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
<script setup lang="ts">
2
const emit = defineEmits<{
3
  change: [payload: { value: string; extra: number }];
4
  close: [];
5
}>();
6

7
function onInput(value: string, extra: number) {
8
  emit("change", { value, extra });
9
}
10

11
function onClose() {
12
  emit("close");
13
}
14
</script>