vuejs数据的编辑条件

Question

我正在制作一个带有vuejs的表清单。我从数据库中获取的数据如上所示。我正在传输axios附带的数据到"data. userlist"。我想做的是;如果"transaction_type"我想编辑。如果我尝试从表中转换数据，它将太长。我该为他做些什么?Examle:我想让我写的条件更有规律。考虑到有成千上万的"transaction_type";像这样，工作量很大。我怎么编辑这个?

"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

一个想法是根据在数据中找到的事务类型给用户一个选择。使用用户的选择筛选大数据集…

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>