A complex condition inside v-if

Question

I want to create a complex condition to pass to the v-if directive.

I have tried the following.

<div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" >

Can I add a complex condition in Vue's v-if? This is not working.

I also tried with && but that wasn't working, either. I haven't found anything in the documentation about this.

Answer 1

Firstly, to answer your question.

Can I add a complex condition in Vue's v-if?

You can pass an arbitrary JavaScript expression to the v-if directive in Vue, including a complex boolean expression which contains operators || or &&.

You can test this on your own. For example, try having the following template.

<div v-if="true && false">I am not visible!</div>

Of course, you might try out something less trivial, too:

<div v-if="1 == 2 || (1 + 2 == 3 && 4 == 4)">I am visible!</div>

---

Your expression looks good, but based on the provided information it's impossible to deduce what exactly is wrong.

Your problem is something else: maybe the data is not in the format you thought it would be, or maybe your logic has a flaw in it.

Answer 2

Yes, you can set complex condition. I suggest you to use Vue computed fields, so you will have better highlight (through Vue Devtools) of variables which use in v-if expression. I suppose that order is data field, so you can set computed fields like this:

computed: {
    orderStatusId: function () {
        // Write some checks is variable defined/undefined
        return this.order.order_products[key].statuses[0].id
    },
    orderStatus: function () {
        return this.order.status
    }
}

and v-if expression should look like this:

<div v-if="orderStatusId !== 3 || orderStatus !== 3" >

In this approach you can review values of variables in your v-if expression.

Answer 3

Yes, you can use any JavaScript expresion inside v-if quotes. But I recommend you to create a function or computed function and to call it inside your if statement, for better readability.

ex:

computed: {
  shouldDisplay: function () {
    return this.order.order_products[key].statuses[0].id) !== 3 || this.order.status !== 3;
  }
  ...
}

<div v-if="shouldDisplay"> ... </div>