如何使用 API 在 Vuejs 中使用复选框过滤数据？

Question

我想使用复选框过滤表中的数据，输出数据将根据选中/未选中显示，例如，当我选中“显示全部”时，将输出所有数据，当我未选中时，则仅输出将显示一些数据。但是当我尝试这样做时，结果在我被检查时没有任何改变

这里是 vue html：

<div class="col-md-8">
  <input type="checkbox" id="checkboxOrder" v-model="checkedValue" value="Onloading Complete" >
  <label for="checkboxOrder">Show All</label>
</div>
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>code</th>
      <th>price</th>
      <th>status</th>
      <th>transporter</th>
      <th>driver</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
      <tr v-for="(item, index) in showOrderDetail" :key="index">
        <td >{{Number(index)+1}}</td>
        <td>{{item.code}}</td>
        <td>{{formatNumber(item.invoice_price)}}</td>
        <td :class="statusBackground(item)">
          <template v-if="item.t_tour">
            <span v-if="!_.isEmpty(item.t_tour.t_tour_detail)"> 
                {{item.t_tour.t_tour_detail[0].status}}
            </span>
            <span v-else>Unproccess</span>
          </template>
          <span v-else>Unproccess</span>
        </td>
        <td class="bg-warning">{{item.m_transporter ? item.m_transporter.name : 'unproccess'}}</td>
        <td>{{driver(item)}}</td>
        <td><span class="btn btn-primary" @click="showModal(item.t_tour)"><i class="fas fa-search"></i></span></td>
      </tr>
  </tbody>
</table>

还有我的 vue.js：

import axios from "axios";
import accounting from "accounting";
import ShowTourDetail from "~/pages/transaction/order/ShowTourDetail";
export default {
  props: {
    rowData: {
      type: Object,
      required: true
    },
    rowIndex: {
      type: Number
    }
  },
  data() {
    return {
      t_order_detail: {},
      checkedValue:[]
    };
  },
  mounted() {
    this.fetchData();
  },
  computed:{
    showOrderDetail(){
      if(!this.checkedValue.length)
        return this.t_order_detail
      return this.t_order_detail.filter(o => this.checkedValue.includes(o.t_tour.t_tour_detail[0].status))
    }
  },
  methods: {
    async fetchData() {
      this.t_order_detail = {
        ...(
          await axios.get(`/api/order-details`, {
            params: { t_order_id: this.rowData.id }
          })
        ).data
      };
    }
};

Answer 1

您可以应用更改方法，例如：

<input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" @change="check($event)">

类似的方法：

 methods: {
    check: function(e) {
        if(e.target.checked){
          console.log("load all data using service");
          // service call here
        }else{
          console.log("load required data using service");
           // service call here
       }
        
    }
  }