JS.VUE.NO.MUTATING.PROPS
Disallow mutation of component props
Rule Details
This rule reports mutation of component props.
{'vue/no-mutating-props': ['error']}
Copy
<!-- 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>
{'vue/no-mutating-props': ['error']}
Copy
<!-- 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>
{'vue/no-mutating-props': ['error']}
Copy
<script>
export default {
setup (props) {
// BAD
props.value = 'test'
}
}
</script>
Options
Nothing.
Further Reading
- Style guide - Implicit parent-child communication (https://vuejs.org/style-guide/rules-use-with-caution.html#implicit-parent-child-communication)
- Vue - Prop Mutation - deprecated (https://v2.vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated)