no-mutating-props.md

Pattern: Mutation of component prop

Issue: -

Description

This rule reports mutation of component props.

<!-- ✗ BAD -->
<template>
  <div>
    <input v-model="value" @click="openModal">
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      }
    },
    methods: {
      openModal() {
        this.value = 'test'
      }
    }
  }
</script>

<!-- ✓ GOOD -->
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)" @click="openModal">
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      }
    },
    methods: {
      openModal() {
        this.$emit('input', 'test')
      }
    }
  }
</script>

<script>
  export default {
    setup (props) {
      // ✗ BAD
      props.value = 'test'
    }
  }
</script>

Further Reading

• eslint-plugin-vue - no-mutating-props
• Style guide - Implicit parent-child communication
• Vue - Prop Mutation - deprecated