有没有办法在桌面上只显示特定数据？ 比如在数据库中收到的数据是否包含'SuperAdmin'而不显示它？

Question

I already get all the data from the database and displayed it on my vue component. But, how can I display specific data on the table? Like if the results from the database contains a user type of 'SuperAdmin' I wanted to filter it like don't display if you find data related 'SuperAdmin'

https://imgur.com/kwTziOG - Here is my output.

I have searched this kind of problem and nothings pops-up.

Say for example.

['Paul','[e-mail]',['Admin']

['Paul', '[e-mail]', ['SuperAdmin']

I just want to display the first array. Since it doesn't have a user type of SuperAdmin.

<tr v-for="user in users.data" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.type}}</td>
<td>{{user.created_at |myDate}}</td>
<td>
    <a href="#" @click="editModal(user)">
        <i class="fa fa-edit"></i>
    </a>
            /
    <a href="#" @click="deleteUser(user.id)">
        <i class="fa fa-trash red"></i>
    </a>

</td>
</tr>

I just displayed all the data being fetch in the database. Just wanted it to filter it somehow.

Answer 1

I have not used Vue in alittle while but if I remember correctly you can just use 'v-if' and it will conditionally render the data. Below is an example of how this could be done.

Possible Solution

<tr v-for="user in users.data" :key="user.id">
<div v-if="user.type == 'SuperAdmin'">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.type}}</td>
<td>{{user.created_at |myDate}}</td>
<td>
    <a href="#" @click="editModal(user)">
        <i class="fa fa-edit"></i>
    </a>
    <a href="#" @click="deleteUser(user.id)">
        <i class="fa fa-trash red"></i>
    </a>
</td>
</div>
</tr>

Hope this answered your question, good luck!