Why this matters
Complex expressions in templates make them less declarative and harder to maintain. Moving logic into computed properties or methods allows for reuse and easier testing.
Component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods.
Complex expressions in templates make them less declarative and harder to maintain. Moving logic into computed properties or methods allows for reuse and easier testing.
Side-by-side examples engineers can pattern-match during review.
{{
fullName.split(' ').map((word) => {
return word.toUpperCase() + word.slice(1)
}).join(' ')
}}
{{ normalizedFullName }}
// The complex expression has been moved to a computed property
computed: {
normalizedFullName() {
return this.fullName.split(' ')
.map(word => word.toUpperCase() + word.slice(1))
.join(' ')
}
}{{ firstName.trim().toUpperCase() }}{{ formattedName }}From the same buckets as this rule.
Check if loops use equality operators (== or !=) in termination conditions. These can lead to infinite loops if the condition is never met exactly. Instead, use relational operators like < or > for safer loop termination.