A complex condition inside v-if

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.


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.

Tags:

Vue.Js