vue/no-mutating-props
disallow mutation of component props
- ⚙️ This rule is included in all of
"plugin:vue/essential",*.configs["flat/essential"],"plugin:vue/vue2-essential",*.configs["flat/vue2-essential"],"plugin:vue/strongly-recommended",*.configs["flat/strongly-recommended"],"plugin:vue/vue2-strongly-recommended",*.configs["flat/vue2-strongly-recommended"],"plugin:vue/recommended",*.configs["flat/recommended"],"plugin:vue/vue2-recommended"and*.configs["flat/vue2-recommended"].
📖 Rule Details
This rule reports mutation of component props.
<!-- ✗ BAD -->
<template>
<div>
<input v-model="value" @click="openModal">
<button @click="pushItem">Push Item</button>
<button @click="changeId">Change ID</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
required: true
},
list: {
type: Array,
required: true
},
user: {
type: Object,
required: true
}
},
methods: {
openModal() {
this.value = 'test'
},
pushItem() {
this.list.push(0)
},
changeId() {
this.user.id = 1
}
}
}
</script>
<!-- ✓ GOOD -->
<template>
<div>
<input :value="value" @input="$emit('input', $event.target.value)" @click="openModal">
<button @click="pushItem">Push Item</button>
<button @click="changeId">Change ID</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
required: true
},
list: {
type: Array,
required: true
},
user: {
type: Object,
required: true
}
},
methods: {
openModal() {
this.$emit('input', 'test')
},
pushItem() {
this.$emit('push', 0)
},
changeId() {
this.$emit('change-id', 1)
}
}
}
</script>
<script>
export default {
setup(props) {
// ✗ BAD
props.value = 'test'
}
}
</script>
🔧 Options
json
{
"vue/no-mutating-props": ["error", {
"shallowOnly": false
}]
}- "shallowOnly" (
boolean) Enables mutating the value of a prop but leaving the reference the same. Default isfalse.
"shallowOnly": true
<!-- ✓ GOOD -->
<template>
<div>
<input v-model="value.id" @click="openModal">
</div>
</template>
<script>
export default {
props: {
value: {
type: Object,
required: true
}
},
methods: {
openModal() {
this.value.visible = true
}
}
}
</script>
📚 Further Reading
🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0