# 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>
Now loading...
<!-- ✓ 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>
Now loading...
<script> export default { setup (props) { // ✗ BAD props.value = 'test' } } </script>
Now loading...

# 🔧 Options

Nothing.

# 📚 Further Reading

# 🔍 Implementation