[在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搜索代码，我想过滤orders中的getOrders并返回它：

   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;
    }
}
    }

我设定

getOrders

在这样的表格中：

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