Vue JS ternary expression

Related searches

i'm using Vue JS and am trying to use a ternary expression to conditionally change the value of something, I'm struggling with how to convert the following to a ternary expression, here's my method, by default: isLoading is true

fetchData(showLoading) {
  if (showLoading) {
    this.isLoading = true
  } else {
    this.isLoading = false
  }
}

Don't use the conditional operator here, just assign showLoading to isLoading, assuming you're passing a boolean:

this.isLoading = showLoading;

If you're not necessarily passing a boolean, then cast to boolean first (if needed):

this.isLoading = Boolean(showLoading);

If you had to use the conditional operator, it would be:

this.isLoading = showLoading ? true : false;

How to use ternary operator in Vue JS?, Try this: <input type="text" v-model="$data[testCondition ? 'name' : 'place']">. new Vue({ el: "#app", data: { name: '', place: '', testCondition: false, }� You can easily apply ternary operator with v-model in vue js. you can see both example simple and using v-model too. ternary condition is key of if condition. if you have small condition in your project than you never want to write if condition and long line of code beside that.

your 'showLoading' data is I guess Boolean and you dont need if else.

this.isLoading = showLoading

and it's wrong below code will get error

this.isLoading = showLoading ? true : false; 

How to properly apply ternary operator in v-model in vue.js?, Here attributeName will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your Vue instance has a data property, attributeName , whose value is "href" , then this binding will be equivalent to v-bind:href .

It looks like you want to force showLoading to be a Boolean so try this

this.isLoading = !!showLoading;

Template Syntax — Vue.js, Well, the code you provided is not a valid Javascript expression so I would doubt that it would run at all This however works: v-bind:class="{'January' : January == 'yes' } No need for a ternary operator at all. You would only use a ternary operator if you wanted to render either one class, or another.

Version 2.5.16 Reproduction link https://jsfiddle.net/zmkt7ajy/178/ Steps to reproduce You can see how the ternary operator only evaluates to the &quot;false&quot

Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for and v-on, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes.

In Vue.js, a binding expression consists of a single JavaScript expression optionally followed by one or more filters. JavaScript Expressions. So far we’ve only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside data bindings:

Comments
  • That's what the Boolean is for (which I personally prefer over !! since it's more explicit)