vuejs Editing conditions of data from - vue.js

Question

I'm making a table listing with vuejs. My data from the database is as above. I'm transferring the data that comes with axios to "data.userList". What I want to do is; if "transaction_type" I want to edit. If I try to convert the data from the table, it will be too long. what should i do for him?
Examle:
I want to make the conditions I have written more regular. Considering that there are thousands of "transaction_types" like this, it's a lot of work. how can i edit this?
"transaction_type" I want to rename it according to the type of incoming data.
const app = new Vue({
el: '#app',
data: {
userList: [{
id: 1,
name: "Prem",
age: 18,
status: "close",
gender: "male",
transaction_type: 'initial_account_balance'
},
{
id: 2,
name: "Chandu",
status: "close",
age: 20,
gender: "female",
transaction_type: 'contact_debit'
},
{
id: 3,
name: "Jong",
status: "open",
age: 21,
gender: "female",
transaction_type: 'contact_credit'
},
{
id: 4,
name: "Steew",
status: "open",
age: 33,
gender: "male",
transaction_type: 'account_debit'
},
{
id: 5,
name: "Abdollah",
status: "open",
age: 26,
gender: "female",
transaction_type: 'account_credit'
},
{
id: 6,
name: "Jerry",
status: "open",
age: 35,
gender: "male",
transaction_type: 'account_debit'
}
]
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vue-router#2.0.0/dist/vue-router.js"></script>
<div id="app">
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
<th>Type</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, i) in userList" class="position-relative">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.status }}</td>
<td>
<p v-if="user.transaction_type ==='initial_account_balance'">Opening Balance</p>
<p v-if="user.transaction_type ==='contact_debit'">Customer Advance</p>
<p v-if="user.transaction_type ==='contact_credit'">Customer</p>
<p v-if="user.transaction_type ==='account_debit'">Customer sales</p>
<p v-if="user.transaction_type ==='account_credit'">Customer Buy</p>
</td>
<td>
{{ user.gender }}
<!-- This can be placed in any of the <td>'s -->
<a class="stretched-link" :href="`#${user.id}`"></a>
</td>
</tr>
</tbody>
</table>
</div>

Answer 1

One idea is to give the user a select based on transaction types found in the data. filter the large data set with the user's selection...
const app = new Vue({
el: '#app',
data: {
xactionType: '',
userList: [{
id: 1,
name: "Prem",
age: 18,
status: "close",
gender: "male",
transaction_type: 'initial_account_balance'
},
{
id: 2,
name: "Chandu",
status: "close",
age: 20,
gender: "female",
transaction_type: 'contact_debit'
},
{
id: 3,
name: "Jong",
status: "open",
age: 21,
gender: "female",
transaction_type: 'contact_credit'
},
{
id: 4,
name: "Steew",
status: "open",
age: 33,
gender: "male",
transaction_type: 'account_debit'
},
{
id: 5,
name: "Abdollah",
status: "open",
age: 26,
gender: "female",
transaction_type: 'account_credit'
},
{
id: 6,
name: "Jerry",
status: "open",
age: 35,
gender: "male",
transaction_type: 'account_debit'
}
]
},
computed: {
xactionTypes() {
return this.userList.map(e => e.transaction_type);
},
filteredData() {
return this.xactionType ? this.userList.filter(e => e.transaction_type === this.xactionType) : this.userList;
}
},
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vue-router#2.0.0/dist/vue-router.js"></script>
<div id="app">
<div>
<label for="xactionType">Select transaction type:</label>
<select id="xactionType" v-model="xactionType">
<option v-for="(type, i) in xactionTypes" :key="i" :value="type">{{type}}</option>
</select>
</div>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
<th>Type</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, i) in filteredData" class="position-relative">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.status }}</td>
<td>
<p v-if="user.transaction_type ==='initial_account_balance'">Opening Balance</p>
<p v-if="user.transaction_type ==='contact_debit'">Customer Advance</p>
<p v-if="user.transaction_type ==='contact_credit'">Customer</p>
<p v-if="user.transaction_type ==='account_debit'">Customer sales</p>
<p v-if="user.transaction_type ==='account_credit'">Customer Buy</p>
</td>
<td>
{{ user.gender }}
<!-- This can be placed in any of the <td>'s -->
<a class="stretched-link" :href="`#${user.id}`"></a>
</td>
</tr>
</tbody>
</table>
</div>