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.