if else within the <dd></dd> tags

I have a code snippet in Vue.js that displays a certain value.

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

If the value is -1, I want to display 0 instead. I tried writing it in C style but encountered a compilation error.

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

However, I received this error message:

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

Could someone please advise me on the correct way to write this code?

javascriptvue.jsfrontend

Answer №1

ESlint is flagging an issue with additional parenthesis in the code (item.speed·!=·-110). It's best to automate these fixes according to ESlint/Prettier guidelines rather than manually correcting them each time.

If you're using VScode, open the Command Palette (ctrl + shift + p) and run:

>ESlint: Fix all auto-fixable Problems

Make sure to have the VScode extension installed in your editor.

To enable automatic fixing on save in your editor, add the following settings to your settings.json by accessing it through the Command Palette + 

>Preferences: Open Settings (JSON)
:

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

Answer №2

Make sure your ternary branches do not duplicate the function call. For instance:

// Instead of writing
condition ? func(arg1) : func(arg2)

// You can write
func(condition ? arg1 : arg2)

I recommend inverting the condition for better readability as it is easier for humans to understand.

Instead of manually applying formatting rules, consider using a tool like Prettier to handle it automatically.

Putting it all together, you could have something similar to this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up a secure HTTPS server using Node.js and Express.js

Currently in the process of setting up a HTTPS server using Node.js and Express.js. This is what I have so far: const filesystem = require('fs'); const express = require('express'); const server = express(); const http = require(&apos ...

javascriptnode.jsexpress

Incorporate a Vue.js computed property into the data retrieved from a server

Coming from Knockout.js, where observables are easily created by defining them, I'm curious if there's a similar approach in Vue.js. let vm = { someOtherVar: ko.observable(7), entries: ko.observableArray() }; function addServerDataToEnt ...

javascriptvue.jsknockout.jsvuejs2async-await

What is the best way to upload my React project to GitHub without adding the node modules directory?

I'm looking to share my React Project on GitHub, but I don't want to include the node modules folder. What's the best way to go about this? ...

javascriptreactjsgitgithubnpm

Error message: Injector Error: R3InjectorError(Standalone[_AppComponent])[_WebService -> _WebService -> _WebService] occurred

Being a student, I must apologize in advance for any mistakes in terminology or gaps in my understanding. I am currently developing an Angular front-end to communicate with my backend API. However, I keep encountering the following error in the web page c ...

htmlangulartypescriptfrontendbackend

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

javascriptcssreactjsstyled-components

I need help using i18N to translate the SELECT option in my VUE3 project. Can someone guide me

<n-select v-model:value="value" :options="options" /> options: [ { label: "Every Person", value: 'file', }, { label: 'Drive My Vehicle', ...

javascriptvue.jsi18nextvue-i18n

Displaying a hidden div using the jQuery .each() method

Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed. An ...

javascriptjqueryhtmlcss

Issue: Unhandled rejection TypeError: Unable to access properties of an undefined variable (retrieving 'data')

Currently, I am developing applications using a combination of spring boot for the backend and react for the frontend. My goal is to create a form on the client side that can be submitted to save data in the database. After filling out the form and attemp ...

javascriptreactjspostpromiseaxios

Using async/await in React to retrieve data after a form submission

I am currently facing an issue with displaying data fetched from an API on the screen. My goal is to retrieve data when a user types something in a form and clicks the submit button. The error message I am encountering is: TypeError: Cannot read propert ...

javascriptreactjsasync-await

The submitHandler for AJAX does not function properly when using bootstrapvalidator

I'm encountering an issue with the Bootstrap validation tool found at https://github.com/nghuuphuoc/bootstrapvalidator The submitHandler function seems to be malfunctioning for me. Upon form submission, the entry is not being created and the form rel ...

javascriptjqueryhtmlajax

Encountering issues with React Apollo hooks after integrating React Native into the monorepo system

I am in the process of setting up a React web app and a React-native app within a monorepo using yarn workspaces. The web and controllers are functioning properly, allowing me to successfully execute graphql queries to my apollo-express server. However, up ...

javascriptreactjsreact-nativeapollomonorepo

Can I send JavaScript variables to a different .PHP file by using Ajax?

I need to transfer javascript variables from one file where calculations are performed to another file containing a mySQL query. The second file is loaded using a .load() function without refreshing or redirecting to it. Is it possible to achieve this wit ...

phpjavascriptjquerymysqlajax

PHP-generated AngularJs Select Element

I'm facing an issue with my PHP function in my AngularJS application. I have created a function to select a default option, but it's not displaying the desired value. Here is the function code: function qtyList($selectName, $selectQty){ $st ...

javascriptphphtmlangularjs

Steps for integrating a Facebook Messenger chatbot with a MongoDB database in order to submit requests and retrieve responses through conversations with the bot

I am currently working on integrating my Facebook Messenger chatbot with a MongoDB database. The chatbot I have created is a simple questionnaire chatbot that takes text inputs and displays buttons with options. When a user clicks on a button, it should ...

javascriptnode.jsmongodbfacebook-messengerfacebook-messenger-bot

How to properly align TableHeader and TableBody contents in a Material-UI table

I am experiencing an issue with a file that is supposed to display a table of data pulled from a database. Although the table does appear, all the data seems to be displayed under the ISSUE NUMBER column, instead of being aligned with their respective col ...

javascriptnode.jsreactjsmaterial-ui

What is the best way to utilize vue-i18n with Vite for translating HTML content?

Currently, I am working with Vite alongside Vue 3 and vue-i18n for a project. The website includes html-formatted pages that need to be shown in the correct locale. After loading the locale files, I keep receiving the message [plugin:unplugin-vue-i18n] Det ...

vue.jsvitevue-i18n

Tips for maintaining a scrollable Material-UI Table with dynamic height?

I'm encountering an issue with the Material-UI Table component in terms of its size and scrollability. Summary: The Material-UI table only becomes scrollable when its parent has a fixed size. If I set the size to 100% to fit the parent, it overflows. ...

javascriptcssreactjsmaterial-uicss-grid

Creating a smooth sliding textarea in HTML

I am working on creating an HTML table with numerous text input areas (textarea) that expand downwards when clicked. Currently, the textarea element expands properly but disrupts the layout of the table. My goal is to achieve a design like this Instead o ...

javascriptjqueryhtmlcsslayout

Various relationships in Sails.js

Exploring associations in Sails.js beta (version 0.10.0-rc4) has been quite intriguing for me. My current challenge involves linking multiple databases to produce a unified result (utilizing sails-mysql). The association scheme I'm working with invo ...

javascriptnode.jsassociationssails.js

Combining mouse interactions with animated bar transitions

I want to create a graph with dynamic bar height transitions whenever it is drawn or redrawn. Once the bars are displayed, I would like mouse events (mouseenter, mouseleave, and mousemove) to trigger a tooltip showing information about the specific bar bei ...

javascripthtmld3.jsmouseevent