Vue. js v-если с ИЛИ не работает должным образом - PullRequest
Новая
       4

Vue. js v-если с ИЛИ не работает должным образом

0 голосов
/ 04 февраля 2020

В моем коде есть логическая ошибка, но я не понимаю почему.

Я хочу скрыть вкладку с именем History, если пользователь находится в группе с именем BasicSport или если он находится в группе с именем Basic.

Я реализовал вкладки с помощью : 

<template>
  <div>
    <div class="row" >
      <button class="btn btn-primary" style="margin-bottom:20px" @click="changeSelectedComp">Back</button>
      <button class="btn btn-primary" style="margin-left:1000px" @click="EditMode">Edit</button>
    </div>

    <vue-tabs>
      <v-tab title="Basic">
        <app-players></app-players>
      </v-tab>
      <v-tab v-if="(!basicGroup || !basicSportGroup)" title="History">
        <app-histories></app-histories>
      </v-tab>
      <v-tab v-if="!basicGroup" title="Timetable">
        <app-timetables></app-timetables>
      </v-tab>
      <v-tab v-if="!basicGroup" title="Scholarship">
        <app-scholarship></app-scholarship>
      </v-tab>
    </vue-tabs>
  </div>
</template>

В этом случае вкладка History по-прежнему отображается, даже если пользователь входит в группу BasicSport:

enter image description here

Но если я напишу 

<v-tab v-if="!basicSportGroup" title="History">

, вкладка не появится:

enter image description here

Я не понять, почему второй работает, но первый нет, так как ИЛИ не является эксклюзивным. Как можно скрыть вкладку History, если пользователь находится в BasicSport или если он входит в группу Basic?

Вот полный компонент

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Вы должны использовать оператор && вместо оператора ||, поскольку вы хотите показать, только если не в BasicSport и не в Basic. 

<v-tab v-if="!basicGroup && !basicSportGroup" title="History">
    <app-histories></app-histories>
</v-tab>

Или вы также можете попробовать !(basicGroup || basicSportGroup)

1 голос
/ 04 февраля 2020

Вы хотите скрыть это, если «пользователь находится в группе с именем BasicSport или если он находится в группе с именем Basic» (1)

Итак, вы хотите показать , если пользователь НЕ в BasicSport И НЕ в Basic. (2)

Ваш логин c должен быть: 

(1)
<v-tab v-if="!(basicGroup || basicSportGroup)" title="History">
  <app-histories></app-histories>
</v-tab>

или 

(2)
<v-tab v-if="!basicGroup && !basicSportGroup" title="History">
  <app-histories></app-histories>
</v-tab>
...