no-mutating-props.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/no-mutating-props	disallow mutation of component props

vue/no-mutating-props

disallow mutation of component props

• ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

📖 Rule Details

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>

🔧 Options

Nothing.

📚 Further reading

• Vue - Prop Mutation - deprecated
• Style guide - Implicit parent-child communication

🔍 Implementation

• Rule source
• Test source