pageClass | sidebarDepth | title | description |
---|---|---|---|
rule-details |
0 |
vue/no-mutating-props |
disallow mutation of component 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"
.
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>
Nothing.