在Vuejs中使用过滤器搜索json？

Question

我想在这个基于json的数组中搜索

track_order

我从服务器得到这个结果并设置在 orders 变量中：

   "records": [
        {
            "phone": "09********8",
            "fullName": "******",
            "records": [
                {
                    "status": "processing",
                    "details": "***",
                    "cost": "1500000",
                    "date": "۹۹/۰۳/۰۷  ۱۰:۱۴",
                    "track_order": ""
                },
                {
                    "status": "send",
                    "details": "***",
                    "cost": "2000000",
                    "date": "۹۹/۰۳/۰۷  ۱۰:۳۹",
                    "track_order": "******"
                },
                {
                    "status": "cancel",
                    "details": "******",
                    "cost": "2000000000000",
                    "date": "۹۹/۰۳/۰۷  ۱۰:۱۴",
                    "track_order": ""
                },
                {
                    "status": "proccing",
                    "details": "******",
                    "cost": "2000000000000",
                    "date": "۹۹/۰۳/۰۷  ۱۰:۱۴",
                    "track_order": ""
                }
            ]
        },
        {
            "phone": "093*******8",
            "fullName": "*******",
            "records": [
                {
                    "status": "send",
                    "details": "********",
                    "cost": "2000000000000",
                    "date": "۹۹/۰۳/۰۷  ۱۰:۴۰",
                    "track_order": "*************"
                }
            ]
        },
        {
            "phone": "09*********1",
            "fullName": "*********",
            "records": []
        }
    ]

这是我的 vue.js 搜索代码，我想在 getOrders 中过滤 orders 并返回它：

   data(){
         return {
           orders:[],
           search:""
        }
  }
  computed:{

      getOrders(){
         if(this.search){
            for(let i=0;i<this.orders.length;i++){

            return this.orders[i].records.filter(record=>{

                return this.search.toLowerCase().split(' ').every(v=>    record.track_order.toLowerCase().includes(v));
            })
        }



    }else{
        return this.orders;
    }
}
    }

我设置了

获取订单

在这样的表中：

         <tbody v-for="(item,index) in getOrders" :key="index">
                      <tr  v-for="(record,index1) in item.records" :key="index1">
                        <td >{{item.fullName}}</td>
                        <td >{{record.details}}</td>
                        <td>{{record.cost}}</td>
                        <td  >{{record.date}}</td>
                        <td >{{record.status}}</td>
                        <td  >{{record.track_order}}</td>
     </tbody>

但它不起作用。 并且通过输入单词进行搜索，表格不会改变 怎么了？ 你能帮帮我吗？

Answer 1

new Vue({
  el: '#app',
  template: `
    <div>
      <input v-model="search"><button v-if="search" type="button" @click="setDefault">default</button>
      <table>
        <tbody v-for="(item,index) in getOrders" :key="index">
          <tr  v-for="(record,index1) in item.records" :key="index1">
            <td >{{item.fullName}}</td>
            <td >{{record.details}}</td>
            <td>{{record.cost}}</td>
            <td  >{{record.date}}</td>
            <td >{{record.status}}</td>
            <td  >{{record.track_order}}</td>
          </tr>  
        </tbody>
      </table>
    </div>
  `,
  data() {
    return {
      search: "",
      records: [{
          "phone": "09********8",
          "fullName": "******",
          "records": [{
              "status": "processing",
              "details": "***",
              "cost": "1500000",
              "date": "۹۹/۰۳/۰۷  ۱۰:۱۴",
              "track_order": "aloha"
            },
            {
              "status": "send",
              "details": "***",
              "cost": "2000000",
              "date": "۹۹/۰۳/۰۷  ۱۰:۳۹",
              "track_order": "******"
            },
            {
              "status": "cancel",
              "details": "******",
              "cost": "2000000000000",
              "date": "۹۹/۰۳/۰۷  ۱۰:۱۴",
              "track_order": ""
            },
            {
              "status": "proccing",
              "details": "******",
              "cost": "2000000000000",
              "date": "۹۹/۰۳/۰۷  ۱۰:۱۴",
              "track_order": "---"
            }
          ]
        },
        {
          "phone": "093*******8",
          "fullName": "*******",
          "records": [{
            "status": "send",
            "details": "********",
            "cost": "2000000000000",
            "date": "۹۹/۰۳/۰۷  ۱۰:۴۰",
            "track_order": "*************"
          }]
        },
        {
          "phone": "09*********1",
          "fullName": "*********",
          "records": []
        }
      ],
    };
  },
  computed: {
    getOrders() {
      if (!this.search) {
        return this.records;
      }
      return this.getOrdersFiltered;
    },

    getOrdersFiltered() {
      const RECORDS = [...this.records];
      const RECORD_NEW = [];
      RECORDS.forEach(item => {
        const RECORDS_CHILD = item.records.filter(record => {
          return record.track_order.toLowerCase().indexOf(this.search) !== -1;
        });
        if (RECORDS_CHILD.length) {
          item.records = RECORDS_CHILD;
          RECORD_NEW.push(item)
        }
      });
      return RECORD_NEW;
    },
  },
  methods: {
    setDefault() {
      this.search = "";
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>