How to make OR and AND together inside v-if

I am trying to make a v-if condition where there is OR operation and right side of there is AND between bracketsm, hoever its not working as expteced, can someone help me ?

v-if="activeCall.state === 'ENDED' || (activeCall.state !== 'ENDED' && !activeCall.sendingVideo)"

…which means?

element which I assigned with v-if result does no come to screen, does the v-if statement is correct ?

Well

  • I don’t know your app
  • I don’t know the values of the variables at the moment that this statement runs
  • I don’t know for which combination of variable values you want it to be true, and under which you want it to be false

So tell me, how should I know what’s wrong with your statement?

well, I just asked whether the syntax is correct at least, I am not sure those kind of inner boolean logic works for v-if

If the syntax was wrong, you would get an error.

Wether the logic is correct depends on what you want her result to be.

It does. Any valid JavaScript expression does.

You might want to consider using a method or a computed property to help you debug.

I can do it with computed property but I wonder why its not possible directly in v-if condition

It seems not only me having the problem

Did you ever figure this out? Because I’m having the same problem. It seems like v-if don’t like || and && at the same time.

Show your code. Optimally, create a minimal reproduction of the bug.

<div v-if="mgHow == 'sc' || mgHow == 'im' && mgHow !== ' ' ">
This will run the the | | stuff but never get to the && stuff

I tried moving the && to the start of the v-if and it only does the && and not the | |

&& has precedence over ||, so what you write means (with extra parentheses to show the precedence order):

mgHow == 'sc' || (mgHow == 'im' && mgHow !== ' ')

So, the div will be shown when one of the following conditions are true:

  • mgHow == 'sc'
  • mgHow == 'im' && mgHow !== ' '

The last condition can be simplified to:

  • mgHow == 'im'

So your condition is currently only:

mgHow == 'sc' || mgHow == 'im'

So whatever you tried to achieve with the && had no effect. So Vue is probably working as it should, it’s you who has written the condition wrong.

This is the answer. Thank you very much for your help. I’m still a newb.