Vue filter array A by array B

I have a table with data from a rest API. The table has objects with unique ids and I have a group filter with unique group ids. The group id does not appear in the table, therefore I have to create an array which only contains the ids of the table objects. Every time the group changes the array will be updated.

My goal is to show only the table objects which are in the array I have created before.

During research I found this interesting example, but I can’t get it to work.

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>

Vue:

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

I got the solution:

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

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