Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 4 down vote favorite

I use Vue js conditional statements in multiple elements.

In some cases, i need to place if and else in same element to filter the elements.

Here,i use multiple elements to apply if and else.

   <block v-if="nb == 3" align="left"></block>
   <block v-if="nb > 3" align="center"></block>

But i want to apply both in single element like,

  <block v-if="nb == 3" align="left" v-else align="center"></block>

Is it possible ?

Or Any other solution to apply this ?

Thank in advance.

share|improve this question
up vote 9 down vote accepted

Rather than using v-if, try binding the attribute to a ternary expression.

// : is a shorthand for v-bind:
<block :align="nb == 3 ? 'left' : 'center'"></block>

If that looks a little too messy for you (or if the logic you want to use is too complicated to express in a single line), you could also try creating a computed property in your component that returns "left" or "center", and then bind to that instead.

share|improve this answer
    
So Computed property is better than this "if and else"...? – Shankar Thiyagaraajan Nov 30 '16 at 11:55
    
@ShankarThiyagaraajan: I'd use a ternary expression for something this simple, but anything more would be much more readable put into a computed property. It's a stylistic choice though, do what feels right. – Joe Clay Nov 30 '16 at 12:01
    
@ShankarThiyagaraajan: As far as I know, there's no way of using v-if and v-else on the same element, so I think binding to something is the only way. – Joe Clay Nov 30 '16 at 12:02
up vote 4 down vote

You can't use v-if and v-else on the same element.

I'd personally use a computed property.

I'm assuming your nb is a reactive variable or similar.

Therefore you should be looking for something like this:

<block v-bind:align="computedAlign"></block>

and then in your component

// assuming you're using data and not props
data() {
  return {
    nb: 1 // default
  }
},
// some other stuff that sets the nb variable in some way
computed: {
  computedAlign() => {
    if (this.nb === 3) {
      return 'left'
    } else {
      return 'center'
    }
  }
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.