if else in <dd></dd> tags-CodePudding

I have a fragment with vue js code. This code print some value.

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

But if I have value == -1 I should to print 0. I write this code like in C style but it have a compilation error.

  <dd>{{ (item.speed != -1) ? dataFormatter(item.speed) : dataFormatter('0') }}</dd>

I have a error like this

error Replace {{·dataFormatter((item.speed·!=·-110)·?·item.speed·:·'0')·}} with ⏎··················{{·dataFormatter(item.speed·!=·-110·?·item.speed·:·'0')·}}⏎················

How I should it write. Help me pls!!!

CodePudding user response：

Here, ESlint mainly complains because of your additional parenthesis here (item.speed·!=·-110) (you can notice it if you make a difference between your string and the one "required").
Still, you need to automate this to follow the guidelines of ESlint/Prettier rather than fixing it yourself every single time by making a diff.

Try to open your Command Palette if you're on VScode and run (ctrl shift p)

>ESlint: Fix all auto-fixable Problems

PS: of course you'll need the VScode extension installed in your code editor.

You can of course set this one up to work on save with your code editor with the following (settings.json, acessible with Command palette >Preferences: Open Settings (JSON))

{
  "editor.codeActionsOnSave": {
    "source.organizeImports": false,
    "source.fixAll": true,
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

CodePudding user response：

The expectation is that your ternary branches don't repeat the function call. E.g.:

// rewrite this
condition ? func(arg1) : func(arg2)

// into this
func(condition ? arg1 : arg2)

I would also suggest negating the condition for readability—it's easier for humans to follow this way.

As for the rest, rather than trying to apply formatting rules manually, it helps to let a formatter like Prettier do it for you.

Altogether, you get something like this:

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