multiline-ternary.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/multiline-ternary	Enforce newlines between operands of ternary expressions in `<template>`	v9.7.0

vue/multiline-ternary

Enforce newlines between operands of ternary expressions in <template>

• 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

This rule is the same rule as @stylistic/multiline-ternary rule but it applies to the expressions in <template> and <style>.

This rule extends the rule that @stylistic/eslint-plugin has, but if @stylistic/eslint-plugin is not installed, this rule extracts and extends the same rule from ESLint core. However, if neither is found, the rule cannot be used.

📖 Rule Details

<template>
  <div>
    <!-- ✓ GOOD -->
    <div :class="isEnabled
      ? 'check'
      : 'stop'" />

    <!-- ✗ BAD -->
    <div :class="isEnabled ? 'check' : 'stop'" />
  </div>
</template>

<style>
div {
  /* ✓ GOOD */
  color: v-bind('myFlag
    ? foo
    : bar');

  /* ✗ BAD */
  color: v-bind('myFlag ? foo : bar');
}
</style>

📚 Further Reading

• @stylistic/multiline-ternary
• multiline-ternary

🚀 Version

This rule was introduced in eslint-plugin-vue v9.7.0

🔍 Implementation

• Rule source
• Test source

^{Taken with ❤️ from ESLint Stylistic}