Как добавить условия в Vue JS при заполнении данных?

Question

Итак, у меня есть таблица, которая заполняет данные, это код:

<tr v-for="user in users" :key="user.id">
   <td>{{user.id}}</td>
   <td>{{user.name | upFirstLetter}}</td>
   <td>{{user.email | upFirstLetter}}</td>
   <td>{{user.role | upFirstLetter}}</td> -- Basically user role has two types (Admin, Customer)
<tr/>

Моя проблема в том, что он заполняет всех пользователей, но я хочу, чтобы он показывал только пользователя с ролью «Клиент».».Я все еще учу Vue, спасибо заранее.

Answer 1

Как уже упоминалось в документации Vue , вы можете комбинировать v-for с v-if, поэтому добавьте предложение v-if в первую строку:

<tr v-for="user in users" :key="user.id" v-if="user.role == 'Customer'">

EDIT:В документации указано , что вместо этого вы должны вычислить список пользователей Customer и выполнить итерацию по этому списку вместо

Answer 2

Если вы хотите показать строку, даже если роль пользователя не является клиентом, вы можете использовать условие в своем элементе td.Это полезно, если у вас есть другие столбцы, которые важно показать, а не показывать строку вообще.Не забудьте добавить v-else с элементом td, чтобы в строке было одинаковое количество элементов td.

<td v-if="user.role="customer">{{user.role | upFirstLetter}}</td>
<td v-else>/<td>