如何在vue.js中结合daterangepicker和vue-tables-2

Question

我是Vue.JS的新手，正在尝试将daterangepicker组合到vue-tables-2插件中，作为我正在构建的仪表板的一部分。

不幸的是，我缺乏如何链接两者的专门知识，因此该表将仅显示介于日期范围选择器生成的日期之间的数据。

在此先感谢您，对于任何违反礼节的行为表示歉意。

HTML：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css"/>

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>

<div class="blended_grid">
  <div class="tablelayer">
    <div id="app">
      <label>Filter By Date:</label>
      <div class="daterange-wrapper">
        <date-range-picker id="dfdfd" v-on:dateRangeChanged="onDateRangeChanged"></date-range-picker>
      </div>

      <v-client-table :columns="columns" :data="data" :options="options">
        <a slot="hid" slot-scope="props" target="_blank">{{props.row.heroid}}</a>
        <span slot="actions" slot-scope="props">
          <a class="glyphicon glyphicon-exclamation-sign" @click="showModal = true"  title="Boost the Priority of this request"></a>
          <a class="glyphicon glyphicon-remove-sign"  title="Delete this request"></a>
          <a class="glyphicon glyphicon-eye-open"  title="View notes"></a>
        </span>
        <div slot="child_row" slot-scope="props">
          This ticket was submitted by: {{props.row.reporter}}
        </div>
      </v-client-table>

    </div>
  </div>
</div>

我的脚本：

Vue.use(VueTables.ClientTable);

Vue.component('date-range-picker', {
    props:['id'],
    template: '<input type="text" :id="id" :name="id" />',
    mounted: function(){
    var self = this;
    var input = $('input[name="'+ this.id +'"]');
    input.daterangepicker();
    input.on('apply.daterangepicker', function(ev, picker) {
      self.$emit('daterangechanged',picker);
    });
  } 
});

const app = new Vue({
  el: "#app",
  methods:{
    onDateRangeChanged: function(picker){
    this.dateRange = picker.startDate + " - " + picker.endDate;     
        }
  },
  data: {
    hid: '',
    startDate: '',
    endDate: '',
    columns: ['hid', 'requesttype', 'requestdate', 'status', 'projects', 'actions'],
    data: [{ 'hid': '2221133', 'requesttype': 'Add References', 'requestdate': '12/07/2016', 'status': 'Ticket Open', 'projects': 'project1', 'actions': 'Action Dropdown', 'id': '1', 'reporter': 'John Donut' },{ 'hid': '3420071', 'requesttype': 'Correction', 'requestdate': '10/17/2016', 'status': 'Ticket Closed', 'projects': 'project2', 'actions': 'Action Dropdown', 'id': '2', 'reporter': 'Jane Smith' }],
    selectedDate: {
      start: '',
      end: ''
    },
    options: {
      headings: {
        heroid: 'THIS ID',
        requesttype: 'Request Type',
        requestdate: 'Request Date',
        status: 'Status',
        projects: 'Project(s)',
        actions: 'Actions'
      },
      dateColumns: ['requestdate'],
      dateFormat: 'MM/DD/YYYY',
      perPage: 5,
      perPageValues: [5,10,25,50,100],
      sortable: ['heroid', 'requesttype', 'requestdate', 'status', 'projects'],
      filterable: ['heroid', 'requesttype', 'requestdate', 'status', 'projects']
    }
  }
});

JSFiddle：https://jsfiddle.net/EpiKAC/ydw1Lv9b/1/