Lint against mutating props
It's an anti-pattern to mutate props within a component, since that violates the one-way data flow encouraged by Vue, and can lead to bugs.
For instance, these sorts of things should not be allowed:
<script>
export default {
props: {
prop1: {
type: Object,
},
prop2: {
type: Object,
}
},
methods: {
onClick() {
this.prop1.list.push(2);
this.prop2.baz = 3;
}
}
}
</script>
<template>
<div>
<div v-if="prop1.foo.bar = 1"></div>
<button @click="onClick"></div>
</div>
</template>
Fortunately, it looks like eslint-plugin-vue
already has the vue/no-mutating-props
for this
So, we should just enable that! Unfortunately, that was only added in eslint-plugin-vue@7
, and we're currently on 6.2.2
.