Computed and data properties should not be used inside the data() of a Vue component
- VUE_MISUSED_PROPERTY_IN_DATA
- Error
- Medium
- vue
This rule applies when a computed or data property is used inside the data() of a Vue component.
Computed and data properties are not yet initialized when executing the data(). So, accessing them results in an undefined value and may lead to unintended behaviors.
Noncompliant Code Example
View with compliant examples side by side<script>
export default {
props: ["size", "startIndex"],
computed: {
count() {
return Number(this.size);
}
},
data() {
if (this.count < 0) {
console.log("Warning: Invalid count"); // VUE_MISUSED_PROPERTY_IN_DATA alarm
}
return {
curIndex: this.startIndex,
nextIndex: this.curIndex + 1 // VUE_MISUSED_PROPERTY_IN_DATA alarm
};
},
methods: {
decrement() {
if (this.curIndex > 0) {
this.curIndex--;
this.nextIndex--;
}
}
}
}
</script>Compliant Code Example
View with noncompliant examples side by side<script>
export default {
props: ["size", "startIndex"],
computed: {
count() {
return Number(this.size);
}
},
created() {
if (this.count < 0) {
console.log("Warning: Invalid count");
}
},
data() {
return {
curIndex: this.startIndex,
nextIndex: this.startIndex + 1
};
},
methods: {
decrement() {
if (this.curIndex > 0) {
this.curIndex--;
this.nextIndex--;
}
}
}
}
</script>Version
This rule was introduced in DeepScan 1.41.0.