Template Simple Expressions
Checks if the template is using only simple expressions.
👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#simple-expressions-in-templates
❓ Why it's good to follow this rule?
- Simplicity: Simple expressions are easier to read and understand.
- Readability: Simple expressions are easier to read and understand.
- Consistency: Using simple expressions makes the code more consistent and easier to maintain.
😱 Examples of code for which this rule will throw a warning
WARNING
The following code contains complex expressions within the template, which should be refactored into computed properties or methods.
vue
<template>
{{
fullName.split(' ').map((word) => {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
</template>
🤩 How to fix it?
TIP
Refactor complex expressions into computed properties or methods to improve readability and maintainability.
vue
<!-- Correct: Simple expression in template -->
<script setup>
const normalizedFullName = computed(() => {
return fullName.split(' ').map((word) => {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
})
</script>
<template>
{{ normalizedFullName }}
</template>
🛠 How to override?
The default max expression length for this rule is 40.
You can override through the new override
option in .config/vue-mess-detector.json
⬇️
json
{
"override": {
"maxExpressionLength": 50
}
}