# vue/no-unused-properties
disallow unused properties
# 📖 Rule Details
This rule is aimed at eliminating unused properties.
Note
This rule cannot be checked for use in other components (e.g. mixins
, Property access via $refs
) and use in places where the scope cannot be determined.
<!-- ✓ GOOD -->
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
props: ['count']
}
</script>
<!-- ✗ BAD (`count` property not used) -->
<template>
<div>{{ cnt }}</div>
</template>
<script>
export default {
props: ['count']
}
</script>
# 🔧 Options
{
"vue/no-unused-properties": ["error", {
"groups": ["props"],
"deepData": false
}]
}
"groups"
(string[]
) Array of groups to search for properties. Default is["props"]
. The value of the array is some of the following strings:"props"
"data"
"computed"
"methods"
"setup"
"deepData"
(boolean
) Iftrue
, the object of the property defined indata
will be searched deeply. Default isfalse
. Include"data"
ingroups
to use this option.
# "groups": ["props", "data"]
<!-- ✓ GOOD -->
<script>
export default {
data() {
return {
count: null
}
},
created() {
this.count = 2
}
}
</script>
<!-- ✗ BAD (`count` data not used) -->
<script>
export default {
data() {
return {
count: null
}
},
created() {
this.cnt = 2
}
}
</script>
# { "groups": ["props", "data"], "deepData": true }
<template>
<Foo :param="state.used">
</template>
<script>
export default {
data() {
return {
state: {
/* ✓ GOOD */
used: null,
/* ✗ BAD (`state.unused` data not used) */
unused: null
}
}
}
}
</script>
# "groups": ["props", "computed"]
<!-- ✓ GOOD -->
<template>
<p>{{ reversedMessage }}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
<!-- ✗ BAD (`reversedMessage` computed property not used) -->
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0