大家好 我是vue 的萌新
在網路上到一段不錯的程式碼
有分頁和關鍵字篩選，
我希望能多一個分類篩選，
並且同時可以對關鍵字跟分類做篩選
*因為目前若輸入關鍵字 只做關鍵字 反之亦然

原始教學網址

https://kuro.tw/posts/2017/05/30/VueJS-V2-%E5%9C%A8-v-for-%E5%88%97%E8%A1%A8%E5%AE%8C%E6%88%90%E5%88%86%E9%A0%81%E5%8A%9F%E8%83%BD/

原始線上修改網址

http://jsbin.com/kusafiqaka/embed?html,js,output

  <div id="app">
    <table class="table table-condensed">
      <tr>
        <th>#</th>
        <th>author</th>
        <th>category_id</th>
        <th>title</th>
        <th>intro </th>
      </tr>
      <tr v-for="(r, index) in filteredRows.slice(pageStart, pageStart + countOfPage)">
        <td>@{{ (currPage-1) * countOfPage + index + 1 }}</td>
        <td>@{{ r.author }}</td>
        <td>@{{ r.category_id}}</td>
        <td>@{{ r.title }}</td>
        <td>@{{ r.intro }}</td>
      </tr>
    </table>

    <div class="pagination">
      <ul>
        <li v-bind:class="{'disabled': (currPage === 1)}" 
        @click.prevent="setPage(currPage-1)"><a href="#">Prev</a></li>
        <li v-for="n in totalPage" v-bind:class="{'active': (currPage === (n))}" 
        @click.prevent="setPage(n)"><a
            href="#">@{{n}}</a></li>
        <li v-bind:class="{'disabled': (currPage === totalPage)}" 
        @click.prevent="setPage(currPage+1)"><a
            href="#">Next</a></li>
      </ul>
    </div>


    <div>Filter name: <input type="text" v-model="filter_name"></div>
    <div>Filter Category: <input type="text" v-model="filter_category_id"></div>

  </div>


<script>
  var app = new Vue({
  el: '#app',
  data: {
    rows: [],
    //每頁資料筆數
    countOfPage: 25,
    //頁數初始值
    currPage: 1,
    //filter初始值
    filter_name: '',
    filter_category_id: ''
  },
  //資料處理
  computed: {
  filteredRows: function(){
    // 因為 JavaScript 的 filter 有分大小寫，
    // 所以這裡將 filter_name 與 rows[n].name 通通轉小寫方便比對。
    var filter_name = this.filter_name.toLowerCase();
    var filter_category_id = this.filter_category_id;

    // 如果 filter_name 有內容，回傳過濾後的資料，否則將原本的 rows 回傳。
    
    if(this.filter_name.trim() !== '' ){
      return this.rows.filter(function(d){ return d.author.toLowerCase().indexOf(filter_name) > -1; })
    }else{
      return this.rows;
    }

  },

    pageStart: function(){
        return (this.currPage - 1) * this.countOfPage;
      },
    totalPage: function(){
      return Math.ceil(this.filteredRows.length / this.countOfPage);
    }
  },
  methods: {
    setPage: function(idx){
      if( idx <= 0 || idx > this.totalPage ){
        return;
      }
      this.currPage = idx;
    },
  },
  created: function(){
    var self = this;
    $.get('http://laravel.com.test/api', function(data){
      self.rows = data;
    });
  }
});
</script>