What is the correct way to modify text color in Vue by utilizing the ternary operator?

Question

What is the correct way to modify text color in Vue by utilizing the ternary operator?

Is there a way to change the text color that is being retrieved from the endpoint? Currently, it only shows the value of the ternary operator on the UI ('backgroundColor:green'). I need assistance with this. Can anyone help?

mainTrack() {
 this.axios
    .get(
      `${configObject.apiBaseUrl}/Maintenance/Company`,
      configObject.authConfig()
    )
    .then((res) => {
     this.maintainTrack= res.data;

     this.maintainTrack.forEach(element => {
       element.isResolve = element.isResolve== 'true' ?  'backgroundColor:green' :  
        'backgroundColor:red'
            });
    })
    .catch((error) => {});
},

javascript vue.js

Answer 1

Answer №1

It is recommended to provide a style object instead of a string :

  element.hasColor = { color: element.isPressed ? 'blue':'yellow' }

Answer 2

It is recommended to provide a style object instead of a string :

  element.hasColor = { color: element.isPressed ? 'blue':'yellow' }

Answer 3

Answer №2

One interesting feature is the ability to include dynamic styles directly in the HTML template.

:style="{'background-color': isResolve ? 'green' : 'red'}"

Check out this Live Demo :

new Vue({
  el: '#app',
  data: {
    isResolve: null
  },
  mounted() {
    // Updating isResolve value based on API response.
    this.isResolve = true;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p :style="{'background-color': isResolve ? 'green' : 'red'}">{{ isResolve }}</p>
</div>

Answer 4

One interesting feature is the ability to include dynamic styles directly in the HTML template.

:style="{'background-color': isResolve ? 'green' : 'red'}"

Check out this Live Demo :

new Vue({
  el: '#app',
  data: {
    isResolve: null
  },
  mounted() {
    // Updating isResolve value based on API response.
    this.isResolve = true;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p :style="{'background-color': isResolve ? 'green' : 'red'}">{{ isResolve }}</p>
</div>

What is the correct way to modify text color in Vue by utilizing the ternary operator?

Answer №1

Answer №2

Similar questions

What is the best way to dynamically write a knockout data binding event using jQuery?

Caution: Take heed when accessing an Excel file exported from an HTML table

embed a hyperlink onto a live video at a designated moment within an HTML document

How come AngularJS $onChanges isn't able to detect the modification in the array?

`Could not locate JavaScript files within the _nuxt directory`

Trouble with JavaScript confirm's OK button functionality in Internet Explorer 11

json evaluation causing an issue

Tracking the progress of reading position using Jquery within an article

Utilizing async/await in JavaScript within a class structure

The blending of Angular 4 HTTP responses creates a jumbled mess

What is the best way to retrieve data from a getter within a namespaced module using vuex?

The conversion of a 2D json array into a string is mistakenly performed

Utilizing underscore.js to aggregate data points: A comprehensive guide

Experiencing a 404 Error with a Specific Route in Node.JS Express

Screen Tearing in Threejs Custom Shader Implementation

Is it possible to achieve consistent scrollY height values across various screen sizes?

What is the recommended way to retrieve the Nuxt `$config` within Vuex state? Can it only be accessed through store action methods?

Can the button run a Python script with the help of jQuery?

Implementing global parameters in ui-router

EmberJS - how to register a precompiled handlebars template