Props of a Vue component should not be mutated
- VUE_MUTATED_PROP
- Code Quality
- Medium
- vue
This rule applies when a prop of a Vue component is mutated inside the component.
Because props are readonly, Vue ignores the mutation attempt and outputs a warning message.
If mutation is required, it is recommended to create a data or computed property based on the prop's value.
Noncompliant Code Example
View with compliant examples side by side<template>
<div>{{ x = 42 }}</div> <!-- VUE_MUTATED_PROP alarm -->
<input v-model="y"/> <!-- VUE_MUTATED_PROP alarm -->
</template>
<script>
export default {
props: ["x", "y"],
methods: {
bar() {
this.x = this.x || []; // VUE_MUTATED_PROP alarm
}
}
}
</script>
Compliant Code Example
View with noncompliant examples side by side<template>
<div>{{ a = 42 }}</div>
<input v-model="b"/>
</template>
<script>
export default {
props: ["x", "y"],
data() {
return {
a: this.x,
b: this.y
};
},
methods: {
bar() {
this.a = this.a || [];
}
}
}
</script>
Version
This rule was introduced in DeepScan 1.41.0.
See
[Vue warn]: Attempting to mutate prop "x". Props are readonly.