我正在使用axios从Vue中的外部Api获取数据(订单)。我获取JSON数据,并且能够在HTML表中显示它。现在,我正在尝试过滤数据以仅显示要使用的相关数据。在我的Json数据中,我有一个名为“订单状态:已完成/正在处理”的字段。现在,我只想显示状态为“正在处理”的json数据以归档我的目标。 我正在尝试将v-if与v-for一起使用,但是我无法获取某些订单数据和视图。 该表设置为每分钟更新一次。 这是我的代码。
html代码
**<div class ="container mt-4" id="app">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Order id</th>
<th scope="col">Name</th>
<th scope="col">Order Date</th>
<th scope="col">Phone</th>
<th scope="col">Address</th>
<th scope="col">Items</th>
<th scope="col">Total</th>
<th scope="col">Print</th>
</tr>
</thead>
<tbody>
<tr
v-for="(order, index) in orders" v-if="order.status === "processing""
:key="order.id"
:class="{highlight: !order.is_printed}"
>
<td>{{ order.id }}</td>
<td>{{ order.billing.first_name + " " +order.billing.last_name }}</td>
<td>{{ order.date_created }}</td>
<td>{{ order.billing.phone}}</td>
<td>{{ order.billing.address_1 + ", " + order.billing.address_2 + ", " + order.billing.city + order.billing.postcode }}</td>
<td>{{ order.line_items[0].name}} </td>
<td>{{ order.total}}</td>
<td><button class="btn btn-primary" @click="printBill(order)">Print</button>
</tr>
</tbody>
</table>**
Vue
<script>
var app = new Vue({
el: '#app',
data: {
orders: []
},
mounted: function() {
// API Call function to be implemented here....
</script>
答案 0 :(得分:0)
从api获取数据后更好地过滤数据。 根据vue.js文档,不建议同时使用v-if和v-for,请阅读以下内容: https://vuejs.org/v2/guide/list.html#v-for-with-v-if
尝试
let filteredData = this.orders.filter(order => order.status === "processing")
答案 1 :(得分:0)
我认为这应该可以解决问题。
根据Vue文档,最好将任何逻辑放入计算属性https://vuejs.org/v2/guide/computed.html
new Vue({
el: "#app",
data: {
orders: [
{ id: 1, status: "processing"},
{ id: 2, status: "other" }
]
},
computed: {
filteredOrders() {
return this.orders.filter(order => order.status === 'processing');
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr v-for="order in filteredOrders" :key="order.id">
<td>{{ order.status }}</td>
</tr>
</tbody>
</table>
</div>