Complex condition inside v-if

Question

I want to create a difficult condition for the transition to the directive v-if.

I have tried the following.

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

Is it possible to add a complex condition in Vue v-if? This does not work.

I also tried with &&, but that didn't work either. I did not find anything in the documentation about this.

Answer 1

First, to answer your question.

Is it possible to add a complex condition in Vue v-if?

You can pass an arbitrary JavaScript expression into a directive v-ifin Vue, including a complex Boolean expression that contains ||or operators &&.

. , .

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

, - :

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

---

, , .

- - : , , , , , , , .

Answer 2

, . Vue, ( Vue Devtools) , v-if. , - , :

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
    }
}

v-if :

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

v-if.

Answer 3

Yes, you can use any JavaScript expression inside v-if codes. But I recommend that you create a function or a computable function and call it inside the 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>

Answer 4

v-if="(segmento != 4) && (segmento != 2) && (segmento != 8)"

Works like the wind for me!