# 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>
Failed to load this editor
<!-- ✓ 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>
Failed to load this editor
<script>
export default {
setup (props) {
// ✗ BAD
props.value = 'test'
}
}
</script>
Failed to load this editor
# 🔧 Options
Nothing.
# 📚 Further Reading
- Style guide - Implicit parent-child communication (opens new window)
- Vue - Prop Mutation - deprecated (opens new window)
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0