Vue模板中处理风扇速度格式化的三元表达式编译错误解决求助

Hey there! Let's get your Vue code working correctly while fixing that compile error.

First, let's break down what's going wrong:

• Your original code had redundant parentheses around the ternary expression, which triggered a linting/formatting error (the message is telling you to remove those extra parentheses).
• There's also a likely typo in your error message (-110 instead of -1) that doesn't match your actual requirement.
• You were calling dataFormatter twice unnecessarily—we can simplify this by moving the ternary logic inside the function's arguments.

Correct Code #

Here's the fixed version that meets your requirement (show 0 when item.speed is -1) and passes the format check:

<dl>
<!-- Fan speed -->
<dt>{{ $t('pageInventory.table.fanSpeed') }}:</dt>
<dd>{{ dataFormatter(item.speed === -1 ? 0 : item.speed) }}</dd>
</dl>

Key Improvements: #

1. Removed redundant parentheses: The ternary expression is directly passed to dataFormatter without extra wrapping, which aligns with Vue template formatting rules.
2. Fixed the condition: Checks for item.speed === -1 (matching your actual requirement instead of the -110 typo in the error message).
3. Passes a number instead of string: Using 0 (number) instead of '0' (string) makes more sense if dataFormatter is designed to handle numerical values (adjust to '0' only if your formatter explicitly expects a string).
4. Simplified logic: We only call dataFormatter once, passing the correct value based on the condition, which is cleaner and more efficient.

If you prefer more readable code (especially for more complex logic), you could also extract this into a computed property or a method in your component, but for this simple case, the inline ternary works perfectly.

内容的提问来源于stack exchange，提问作者Ioan Irggq