Сложное условие внутри v-if

Я хочу создать сложное условие для перехода к директиве v-if.

Я пробовал следующее.

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

Можно ли добавить сложное условие в Vue v-if? Это не работает.

Я также пробовал с &&, но это тоже не сработало. Я ничего не нашел в документации об этом.

Ответ 1

Во-первых, чтобы ответить на ваш вопрос.

Можно ли добавить сложное условие в Vue v-if?

Вы можете передать произвольное выражение JavaScript в директиву v-if в Vue, включая сложное булево выражение, которое содержит операторы || или &&.

Вы можете проверить это самостоятельно. Например, попробуйте создать следующий шаблон.

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

Конечно, вы можете попробовать что-то менее тривиальное:

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

Ваше выражение выглядит хорошо, но на основе предоставленной информации невозможно определить, что именно не так.

Ваша проблема - это что-то еще: возможно, данные не в том формате, который, по вашему мнению, был бы, или, может быть, в вашей логике есть недостаток.

Ответ 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.

Ответ 3

Да, вы можете использовать любое выражение JavaScript внутри кодов v-if. Но я рекомендую вам создать функцию или вычислимую функцию и вызвать ее внутри оператора if для лучшей читаемости.

ex:

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

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

Ответ 4

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

Работает как ветер для меня!