[Vuejs]-Filter data in vuejs according to an external searchform

by

0👍

Your use of jQuery selectors is an indicator that your viewmodel is incomplete. You should not be pulling things from the DOM.

You need to have data items for the search criteria. Use those in your search routine. If you also used them in your form, you would have live-updating searches, but since you want to have a button to trigger the search, you need data items for the form fields. The form submit action is to copy the form data items into the search criteria data items, and the search will react to the changes.

const companies = [{
  index: 1,
  name: 'One',
  streetname: 'First',
  postcode: '11111',
  city: 'Onesville',
  isarchived: false
}, {
  index: 2,
  name: 'Two',
  streetname: 'Second',
  postcode: '22222',
  city: 'Twoburg',
  isarchived: false
}];

new Vue({
  el: 'body',
  data: {
    selectedCompany: '',
    selectedContactName: '',
    candidateCompany: '',
    candidateContactName: '',
    companies: companies,
    checkedCompanies: {},
    showArchived: false,
    selectedItems: []
  },

  methods: {
    select: function(company, event) {
      if ($(event.target).is(':checked')) {
        this.selectedItems.push(company);
      } else {
        var index = this.selectedItems.indexOf(company);
        this.selectedItems.splice(index, 1);
      }
    },

    selectAll: function(event) {
      $('.company-check').each(function(index, item) {
        $(item).trigger('click');
      });
    },

    archive: function() {
      for (company in this.selectedItems) {
        this.selectedItems[company].isarchived = true;
      }

      this.selectedItems = [];
    },

    delete: function() {
      for (company in this.selectedItems) {
        this.companies.$remove(this.selectedItems[company]);
      }

      this.selectedItems = [];
    },

    toggleShowArchived: function() {
      this.showArchived = !this.showArchived;
    },

    search: function(company) {
      var companyId = this.selectedCompany;
      var contactName = this.selectedContactName;

      console.debug("Filtering", companyId, company.index);
      if (company.isdeleted || company.isarchived != this.showArchived) {
        return false;
      }

      if (companyId !== "" && company.index != companyId) {
        return false;
      }

      if (contactName !== '' && company.name.search(contactName) === -1) {
        return false;
      }

      return true;
    },
    applySearch: function() {
      this.selectedCompany = this.candidateCompany;
      this.selectedContactName = this.candidateContactName;
    }
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<table>
  <tbody v-for="company in companies | filterBy search">
    <tr>
      <td>{{ company.name}}</td>
      <td>{{ company.streetname }}, {{ company.postcode }} {{ company.city }}</td>
      <td>{{ company.vatnumber }}</td>
      <td>{{ company.iban }}</td>
      <td><i data-toggle="modal" data-target="#createCompanyModal" class="fa fa-file-text"></i> 
      </td>
    </tr>
  </tbody>
</table>

<form id="companies-search-form" v-on:submit.prevent="applySearch">
  <div class="form-group">
    <div class="form-group">
      <label for="companyname-select">Company name</label>
      <select name="companyname" id="companyname-select" class="form-control" v-model="candidateCompany">
        <option value="">All</option>
        <option v-for="company in companies" v-bind:value="company.index">
          {{ company.name }}
        </option>
      </select>
    </div>
    <div class="form-group">
      <label for="contactname-input">Contact name</label>
      <input type="text" name="contactname" class="form-control" id="contactname-input" v-model="candidateContactName">
    </div>
    <div class="form-group">
      <input type="submit" class="btn btn-default btn-outline pull-right" value="Search">
    </div>
  </div>
</form>

Leave a comment