noVueMutatingProps (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.4
Diagnostic Category: lint/nursery/noVueMutatingProps
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/no-mutating-props

How to configure

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

Description

Disallow changing the props of a Vue component.

Props pass data from a parent component down to a child. The parent owns that data, so the child should treat its props as read-only. Vue refuses to assign a new value to a prop and warns about it. Changing an object or array prop in place, for example by setting one of its properties or calling push() on it, does work, but it changes the parent’s data without the parent knowing, which makes the data flow of the application hard to follow.

Instead, emit an event so the parent changes the value itself, or copy the prop into a local ref() or computed property when the child needs a value of its own.

This rule reports props that are assigned, incremented, deleted, bound with v-model, or changed in place with an array method such as push() or sort(), in the script and in the template.

Examples

Invalid

1
<script>
2
export default {
3
  props: {
4
    count: Number,
5
  },
6
  methods: {
7
    increment() {
8
      this.count++;
9
    },
10
  },
11
};
12
</script>

code-block.vue:8:12 lint/nursery/noVueMutatingProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This changes the prop count.
  
     6 │   methods: {
     7 │     increment() {
   > 8 │       this.count++;
       │            ^^^^^
     9 │     },
    10 │   },
  
  ℹ A prop belongs to the parent component. Changing it from the child either fails, or changes the parent's data without the parent knowing.
  
  ℹ Emit an event so the parent can change the value, or copy the prop into a local ref() or computed property.
  
  ℹ 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>
2
const props = defineProps({
3
  items: Array,
4
});
5

6
function addItem() {
7
  props.items.push("new item");
8
}
9
</script>

code-block.vue:7:9 lint/nursery/noVueMutatingProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This changes the prop items.
  
    6 │ function addItem() {
  > 7 │   props.items.push("new item");
      │         ^^^^^
    8 │ }
    9 │ </script>
  
  ℹ A prop belongs to the parent component. Changing it from the child either fails, or changes the parent's data without the parent knowing.
  
  ℹ Emit an event so the parent can change the value, or copy the prop into a local ref() or computed property.
  
  ℹ 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
import { defineComponent } from "vue";
2

3
export default defineComponent({
4
  props: {
5
    user: Object,
6
  },
7
  setup(props) {
8
    props.user.name = "Alice";
9
  },
10
});

code-block.js:8:11 lint/nursery/noVueMutatingProps ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This changes the prop user.
  
     6 │   },
     7 │   setup(props) {
   > 8 │     props.user.name = "Alice";
       │           ^^^^
     9 │   },
    10 │ });
  
  ℹ A prop belongs to the parent component. Changing it from the child either fails, or changes the parent's data without the parent knowing.
  
  ℹ Emit an event so the parent can change the value, or copy the prop into a local ref() or computed property.
  
  ℹ 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>
2
defineProps({
3
  value: String,
4
});
5
</script>
6

7
<template>
8
  <input v-model="value" />
9
</template>

Valid

1
<script setup>
2
import { ref } from "vue";
3

4
const props = defineProps({
5
  count: Number,
6
});
7
const emit = defineEmits(["update:count"]);
8

9
const localCount = ref(props.count);
10

11
function increment() {
12
  localCount.value++;
13
  emit("update:count", props.count + 1);
14
}
15
</script>
16

17
<template>
18
  <input :value="count" @input="emit('update:count', $event.target.value)" />
19
</template>