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

Was this documentation helpful?