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

<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

<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

• Components In-Depth - One-Way Data Flow

• [Vue warn]: Attempting to mutate prop "x". Props are readonly.