Question

我有一组显示在表格中的数据。

我的Vue对象如下：

<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>

所以我的数据会被搜索方法过滤掉。

在同一页面上有一个搜索表单，当我在搜索表单中输入数据时，我希望根据搜索表单更新表格。

    new Vue({
    el: '#app',
    data: {
        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 = $('#companyname-select').val();
            var contactName = $('#contactname-input').val();

            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;
        }
    }
});

我尝试将相同的事件附加到表单的提交操作，但数据没有更新。有谁知道我应该怎么解决这个问题？

Answer 1

您对jQuery选择器的使用表明您的viewmodel不完整。你不应该从DOM中提取东西。

您需要拥有搜索条件的数据项。使用search例程中的那些。如果您还在表单中使用它们，则会进行实时更新搜索，但由于您希望有一个按钮来触发搜索，因此您需要表单字段的数据项。表单提交操作是将表单数据项复制到搜索条件数据项中，搜索将对更改做出反应。

＆＃13;

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;
    }
  }
});

＆＃13;

<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>

＆＃13;

根据外部搜索表单过滤vuejs中的数据

1 个答案: