Question

我有一张表格，其中包含来自rest api的数据。该表具有带uniqe id的对象，而我有带uniqe group id的组过滤器。组ID不会出现在表中，因此我必须创建一个仅包含表对象ID的数组。每次更改组，阵列都会更新。

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

在研究过程中，我发现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>

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 1

我找到了解决方法：

BGSAVE

Vue过滤器阵列A逐阵列B

1 个答案: