When I incorporate multiple conditions in the ternary operator, my Vue App fails to load

Question

When I incorporate multiple conditions in the ternary operator, my Vue App fails to load

When working on a weather display app and using Vue for learning purposes, I originally had the following expression that worked fine:

<div id="app" :class="typeof weather.main != 'undefined' && weather.main.temp < 16 ? '' : 'warm' ">

However, when I tried to change the expression to:

<div id="app" :class="typeof weather.main != 'undefined' && weather.main.temp < 16 ? '' : weather.main.temp < 18 ? 'chill' : weather.main.temp < 30 ? 'warm' : 'hot' ">

The app would compile without any errors, but nothing would load and the console remained blank.

javascript vue.js ternary

Answer 1

Answer №1

The issue at hand pertains to operator precedence. The expression is being assessed as:

(typeof weather.main != 'undefined' && weather.main.temp < 16) ? '' : (weather.main.temp < 18 ?'chill': weather.main.temp < 30 ?'warm':'hot')

This leads to the scenario where weather.main.temp < 18 is evaluated even when weather.main happens to be undefined.

The remedy lies in refraining from incorporating convoluted code into the template and instead transferring it to a computed property where it can be composed in a clear and manageable format. The utilization of a typeof check for undefined values is necessary solely for variables that may potentially be undefined. Optional chaining capabilities can be harnessed in computed properties within Vue 2 to bypass condition checks, just as in templates within Vue 3.

An alternative approach could adopt the following structure:

computed: {
  appClass() {
    if (!weather.main || weather.main.temp < 16)
      return '';
    else if (weather.main.temp < 18)
      return 'chill';
    else if (weather.main.temp < 30)
      return 'warm';
    else 
      return 'hot';
  }
}

Answer 2

The issue at hand pertains to operator precedence. The expression is being assessed as:

(typeof weather.main != 'undefined' && weather.main.temp < 16) ? '' : (weather.main.temp < 18 ?'chill': weather.main.temp < 30 ?'warm':'hot')

This leads to the scenario where weather.main.temp < 18 is evaluated even when weather.main happens to be undefined.

The remedy lies in refraining from incorporating convoluted code into the template and instead transferring it to a computed property where it can be composed in a clear and manageable format. The utilization of a typeof check for undefined values is necessary solely for variables that may potentially be undefined. Optional chaining capabilities can be harnessed in computed properties within Vue 2 to bypass condition checks, just as in templates within Vue 3.

An alternative approach could adopt the following structure:

computed: {
  appClass() {
    if (!weather.main || weather.main.temp < 16)
      return '';
    else if (weather.main.temp < 18)
      return 'chill';
    else if (weather.main.temp < 30)
      return 'warm';
    else 
      return 'hot';
  }
}

When I incorporate multiple conditions in the ternary operator, my Vue App fails to load

Answer №1

Similar questions

How to create a continuous fade effect on text using jQuery/Javascript

Utilize Vue CLI 3 to enable popups in arcgis API JS

Bootstrap encountered an issue with altering header information

Is it possible to have individual JavaScript files for each action in Rails 3?

What is the process of extracting information from individual getters in Vue?

Automating the testing of Google Analytics for every event triggered with Selenium WebDriver

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

Include the image source and hyperlink in List.js

Sinon causing 'unsafe-eval' error in Chrome extension unit tests

'Without the need to refresh the page, assign a JavaScript variable from JSP on the server side.'

Physijs: Administer a sudden force to a certain point within the 3D object

Utilizing Angular's expressions in conjunction with HTML5 data attributes

Out-of-sync movement in animated characters

Ways to bring GIFs into NextJS

Struggling with collaborating with an assistant in handlebars and express operations

Is there a way to pause and await the completion of an axios post request within a different axios interceptor?

The POST method functions properly in the local environment, however, it encounters a 405 (Method Not Allowed) error in the

How can I access properties of generic types in TypeScript?

Converting a JavaScript timestamp into a human-readable date and time using as.POSIXct in R

Form submission failure due to dynamic input manipulation