在 Vue.js 中使用 V-for 和 V-if 在条件下显示 JSON 数据

Posted

技术标签:

【中文标题】在 Vue.js 中使用 V-for 和 V-if 在条件下显示 JSON 数据【英文标题】:Displaying JSON data on condition using V-for and V-if in Vue.js 【发布时间】:2020-11-29 09:40:13 【问题描述】:

我正在使用 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>

【问题讨论】:

【参考方案1】:

从 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")

【讨论】:

【参考方案2】:

我认为这应该可以解决问题。

根据 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>

【讨论】:

以上是关于在 Vue.js 中使用 V-for 和 V-if 在条件下显示 JSON 数据的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 从源码理解v-for和v-if的优先级的高低

v-for 和 v-if 在 vue.js 中不能一起工作

Vue.js学习之条件v-if和列表循环v-for详解

包含 Vue.js v-if 和 v-for 指令的 HTML 标签在加载时闪烁

Vue.js v-for中能不能嵌套使用v-if

在没有 v-if 和 v-for 的 Vue.js 中显示(添加、编辑)和删除多个列中的列表项