Vue 按数组 B 过滤数组 A

Question

我有一个 table 的数据来自休息 API。 table 具有具有唯一 ID 的对象，我有一个具有唯一组 ID 的组过滤器。组 ID 没有出现在 table 中，因此我必须创建一个仅包含 table 对象 ID 的数组。每次组更改时，数组都会更新。

我的目标是仅显示我之前创建的数组中的 table 个对象。

在研究过程中，我发现了 this 个有趣的例子，但我无法让它发挥作用。

HTML:

         <div class="row ">
          <div class="col-12">
            <div class="input-group">
              <div class="input-group-prepend">
                <div class="input-group-text" id="searchAddon"><i class="fa fa-search" aria-hidden="true"></i></div>
              </div>
                  <input type="text" class="form-control form-control-sm" id="searchInput" placeholder="Fahrzeug suchen" autocomplete="off" title="Funknummer" v-model="vehicleSearch" v-bind:disabled="filterDisabled">
              <div class="input-group-append">
                <button class="btn btn-outline-secondary btn-sm" type="button" @click="vehicleSearch = ''" v-bind:disabled="filterDisabled"><i class="fa fa-times" aria-hidden="true"></i></button></span>
              </div>
            </div>
          </div>
        </div>

        <div class="row mt-3" name="selectVehicleFilterGroup">
          <div class="col-sm-12">
            <select id="dropDownVehicleFilterGroupSidebar" class="custom-select custom-select-sm" v-model="vehicleGroup" @change="updateTomTomGroupSelect" v-bind:disabled="filterDisabled">
              <option v-for="group in tomTomVehicleGroup" v-bind:value="group.objectgroupuid">{{ group.objectgroupname }} ({{ group.objectcount }})</option>

            </select>
          </div>
        </div>
        <div class="row mt-3">
          <div class="col-12">
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="CheckboxShowActiveVehicle" title="Aktive Fahrzeuge anzeigen" v-model="filterActiveVehicle" v-bind:disabled="filterDisabled">
              <label class="custom-control-label" for="CheckboxShowActiveVehicle">Aktive Fahrzeuge &ensp;<span id="spanActiveVehicle" class="badge badge-secondary">{{ countActiveVehicle.length }}</span></label>
            </div>
          </div>
        </div>

<table class="table table-hover table-sm" style="">
   <thead>
   </thead>
      <tbody>
        <tr v-for="vehicle in filteredTomTomVehicle" :key="vehicle.properties.objectuid" v-bind:id="vehicle.properties.objectno">
         <td>{{ vehicle.properties }}</td>
        </tr>
       </tbody>
      </table>

视觉：

var vehicleList = new Vue({
  el: '#appTomTomVehicleList',
  data: {
    tomTomVhehicle: [], // Array A
    tomTomVehicleGroup: [],
    tomTomVehicleObjects: [], // Array with group id and object id
    tomTomGroupSelect: [], // Filter Array B
    vehicleSearch: undefined,
    vehicleGroup: '1-44060-0414****',
    filterActiveVehicle: false,
    filterDisabled: true,
    loading: true

  },
  methods: {


    getTomTomVehicle: function() {

      var self = this;

      $.getJSON('http://127.0.0.1/app/index.php/api/1/vehicle/showAll?format=json', function(data) {
        self.tomTomVhehicle = data;
      })
      .done(function() {
       // console.log('TomTom vehicle loaded');

      })
      .fail(function(data) {
        console.log('TomTom vehicle: '+data.statusText+' ('+data.status+')');
        // console.log(data.responseText);
      })
      .always(function() {
        // console.log('always');
        self.filterDisabled = false;
        self.loading = false;
      });
    },
    getTomTomVehicleGroup: function() {

      var self = this;
      $.getJSON('http://127.0.0.1/app/index.php/api/1/vehicleGroup/showGroups?format=json', function(data) {
        self.tomTomVehicleGroup = data;
      })
      .done(function(data) {
      // console.log('TomTom vehicle group loaded');
      })
      .fail(function(data) {
        console.log('TomTom vehicle group: '+data.statusText+' ('+data.status+')');
        // console.log(data.responseText);
      })
      .always(function() {
        // console.log('always');
      });
    },
    getTomTomVehicleObjects: function() {

      var self = this;
      $.getJSON('http://127.0.0.1/app/index.php/api/1/vehicleGroup/showObjects?format=json', function(data) {
        self.tomTomVehicleObjects = data;
      })
      .done(function(data) {
      // console.log('TomTom vehicle objects loaded');
      })
      .fail(function(data) {
        console.log('TomTom vehicle objects: '+data.statusText+' ('+data.status+')');
        // console.log(data.responseText);
      })
      .always(function() {
        // console.log('always');
      });

    },
    updateTomTomGroupSelect() {

      var self = this;

      this.tomTomGroupSelect = [];

      this.tomTomVehicleObjects.forEach(function(element) {

        if (self.vehicleGroup === element.objectgroupuid) {

          self.tomTomGroupSelect.push(element.objectno)
        }
      })

    }
  },
  computed: {

    filteredTomTomVehicle: function() {

      let vehicles = this.tomTomVhehicle.features;

      if (this.vehicleSearch) {
        vehicles = vehicles.filter((v) => {
          return v.properties.objectno.indexOf(this.vehicleSearch.trim()) !== -1

        });
      }

      if (this.filterActiveVehicle) {
        vehicles = vehicles.filter((v) => {
          return v.properties.ignition === 1 && v.properties.standstill === 0;
        });
      }

      if (this.vehicleGroup) {

      /*
        vehicles = vehicles.filter((v) => {
          return v.properties.objectno.indexOf(this.tomTomGroupSelect);
        });
      */
        }

      return vehicles;

    },
    countActiveVehicle: function() {

      let vehicles = this.tomTomVhehicle.features;

      if (vehicles != undefined) {
        vehicles = vehicles.filter((v) => {
          return v.properties.ignition === 1 && v.properties.standstill === 0;
        });
        this.count = vehicles.length
      } else {
        vehicles = 0;
      }
      return vehicles
    }
  },
  mounted: function() {

    var self = this;

    this.getTomTomVehicle();
    this.getTomTomVehicleObjects();
    this.getTomTomVehicleGroup();

    setInterval(function() {
      self.getTomTomVehicle();
      // this.getTomTomVehicle();
    }, 60000)
  }
});

Answer 1

我得到了解决方案：

if (this.vehicleGroup && this.tomTomGroupSelect.length !== 0) {

  vehicles = vehicles.filter((v) => {
    return this.tomTomGroupSelect.includes(v.properties.objectno);
  });
}

Vue 按数组 B 过滤数组 A

Vue filter array A by array B

javascript

arrays

vue.js

vuejs2