vueを使用してテーブル内の表示項目のみを並べ替える方法

Question

次のコードに関する2つの質問があります。

第1の問題：配列に[1,2,4,5,7]のIDを持つ4つの項目があるとします。 ソートをクリックすると、ページごとに2つの項目が選択され、エントリが表示されますidの値が1 & 2または5 & 7の場合、逆の順序を切り替えます。 ページビューに表示されているアイテムを並べ替えるには、どうすればテーブルを取得できますか？

第二の問題：私たちは、VUEの混合物と、我々が購入し、管理テンプレートからいくつかのjQueryを使用している、しかし、それはコードで<div class="checkbox checkbox-styled">を書いたところ、私はとのsetTimeoutでVueのコードを入れない限り、チェックボックスは表示されません 区間の値が「100」以上である。 jqueryに依存する項目がvue forループ内にある場合は、一般的にはjqueryでうまく表示されません。 誰かがこれについて説明していますか？

質問をできるだけ小さくするために、これを削除しました。

<div class="section-body"> 
    <!-- BEGIN DATA TABLE START --> 
    <form class="form" role="form"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div id="" class="dataTables_wrapper no-footer"> 
        <div class="table-responsive"> 
         <table style="width: 100%" cellpadding="3"> 
          <tr> 
           <td> 
            <div class="dataTables_length" id="entries_per_page"> 
             <label> 
              <select name="entries_per_page" aria-controls="datatable" v-model="itemsPerPage"> 
               <option value='2'>2</option> 
               <option value='20'>20</option> 
               <option value='30'>30</option> 
              </select> 
              entries per page 
             </label> 
            </div> 
           </td> 
          </tr> 
         </table> 

         <table class="table table-striped table-hover dataTable"> 
          <thead> 
           <tr> 
            <th> 
             <div class="checkbox checkbox-styled"> 
              <label> 
               <input type="checkbox" v-model="selectAll" :checked="allSelected" @click="selectAllCheckboxes"> 
              </label> 
             </div> 
            </th> 
            <th v-bind:class="{'sorting': col.key !== sortKey, 'sorting_desc': col.key == sortKey && !isReversed, 'sorting_asc': col.key == sortKey && isReversed}" v-for="col in columns" @click.prevent="sort(col.key)"> 
             <a href="#" v-cloak>${ col.label | capitalize}</a> 
            </th> 
            <th class="text-right">Actions</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr v-for="item in items | paginate | filterBy search"> 
            <td width="57"> 
             <div class="checkbox checkbox-styled"> 
              <label> 
               <input type="checkbox" value="${ item.id }" v-model="cbIds" :checked="cbIds.indexOf(item.id) >= 0" /> 
              </label> 
             </div> 
            </td> 

            <!-- !ENTITY_NAME TABLE COLUMNS START --> 
             <td v-cloak>${ item.id }</td> 
             <td v-cloak>${ item.title }</td> 
            <!-- !ENTITY_NAME TABLE COLUMNS END --> 

            <td class="text-right"> 
             <button type="button" class="btn btn-icon-toggle" data-toggle="tooltip" data-placement="top" data-original-title="Edit row" @click="editItem(item)"> 
              <i class="fa fa-pencil"></i></button> 
             <button type="button" class="btn btn-icon-toggle" data-toggle="tooltip" data-placement="top" data-original-title="Delete row" @click="deleteModalOpened(item)"> 
              <i class="fa fa-trash-o"></i> 
             </button> 
            </td> 
           </tr> 
          </tbody> 
         </table> 

         <!-- PAGINATION START --> 
         <div class="dataTables_info" role="status" aria-live="polite" v-if="resultCount > 0" v-cloak> 
          Showing ${ currentCountFrom } to ${ currentCountTo } of ${ resultCount } entries 
         </div> 

         <div class="dataTables_paginate paging_simple_numbers" id="datatable_paginate" v-if="resultCount > 0"> 
          <a class="paginate_button previous disabled" @click="previousPage()" v-if="currentPage==0"> 
           <i class="fa fa-angle-left"></i>  
          </a> 
          <a class="paginate_button previous" @click="previousPage()" v-else> 
           <i class="fa fa-angle-left"></i>  
          </a> 

          <span v-for="pageNumber in totalPages"> 
           <a class="paginate_button current" @click="setPage(pageNumber)" v-show="pageNumber == currentPage" v-cloak>${ pageNumber + 1 }</a> 
           <a class="paginate_button" @click="setPage(pageNumber)" v-show="pageNumber != currentPage" v-cloak>${ pageNumber + 1 }</a> 
          </span> 

          <a class="paginate_button next disabled" @click="nextPage()" v-if="currentPage == (totalPages - 1)"> 
           <i class="fa fa-angle-right"></i> 
          </a> 
          <a class="paginate_button previous" @click="nextPage()" v-else> 
           <i class="fa fa-angle-right"></i> 
          </a> 
         </div> 
         <!-- PAGINATION END --> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
    <!-- BEGIN DATA TABLE END --> 
</div> 

<script> 
    Vue.config.delimiters = ['${', '}']; 

    new Vue({ 
     el: '#app', 

     data: { 
      items: [], 
      columns: [      
       { 
        key: 'id' , 
        label: 'id' , 
       },      
       { 
        key: 'title' , 
        label: 'title' , 
       },      
      ], 

      // ALL PAGINATION VARS 
      currentPage: 0, 
      itemsPerPage: 20, 
      resultCount: 0, 
      totalPages: 0, 
      currentCountFrom: 0, 
      currentCountTo: 0, 

      allSelected: false, 
      cbIds: [], 

      sortKey: '', 
      isReversed: false 
     }, 

     computed: { 
      totalPages: function() { 
       return Math.ceil(this.resultCount/this.itemsPerPage); 
      }, 
      currentCountFrom: function() { 
       return this.itemsPerPage * this.currentPage + 1; 
      }, 
      currentCountTo: function() { 
       var to = (this.itemsPerPage * this.currentPage) + this.itemsPerPage; 
       return to > this.resultCount ? this.resultCount : to; 
      } 
     }, 

     ready: function() { 
      this.pageUrl = '{{ path('items_ajax_list') }}'; 
      this.getVueItems(); 
     }, 

     filters: { 
      paginate: function(list) { 
       this.resultCount = this.items.length; 

       if (this.currentPage >= this.totalPages) { 
        this.currentPage = Math.max(0, this.totalPages - 1); 
       } 

       var index = this.currentPage * this.itemsPerPage; 

       return this.items.slice(index, index + this.itemsPerPage); 
      } 
     }, 

     methods : { 
      sort: function (column) { 
       if (column !== this.sortKey) { 
        this.sortKey = column; 
        this.items.sort(this.sortAlphaNum); 
        this.isReversed = false; 
        return; 
       } 

       this.reverse(); 

       if (this.isReversed) { 
        this.isReversed = false; 
       } 
       else { 
        this.isReversed = true; 
       } 
      }, 

      reverse: function() {this.items.reverse()}, 

      sortAlphaNum: function (a, b) { 
       if (a[this.sortKey] === undefined) return; 
       if (b[this.sortKey] === undefined) return; 

       var cva = a[this.sortKey].toString().toLowerCase(); 
       var cvb = b[this.sortKey].toString().toLowerCase(); 

       var reA = /[^a-zA-Z]/g; 
       var reN = /[^0-9]/g; 

       var aA = cva.replace(reA, ""); 
       var bA = cvb.replace(reA, ""); 

       if(aA === bA) { 
        var aN = parseInt(cva.replace(reN, ""), 10); 
        var bN = parseInt(cvb.replace(reN, ""), 10); 
        return aN === bN ? 0 : aN > bN ? 1 : -1; 
       } 

       return aA > bA ? 1 : -1; 
      }, 

      setPage: function(pageNumber) {this.currentPage = pageNumber}, 

      nextPage: function() { 
       if (this.pageNumber + 1 >= this.currentPage) return; 
       this.setPage(this.currentPage + 1); 
      }, 

      previousPage: function() { 
       if (this.currentPage == 0) return; 
       this.setPage(this.currentPage - 1); 
      }, 

      getVueItems: function(page){ 
       this.$http.get(this.pageUrl) 
        .then((response) => { 
         var res = JSON.parse(response.data); 
         this.$set('items', res); 
        }); 
      }, 

     } 
    }); 
    </script> 

Answer 1

あなたの最初の問題について、あなたはページ分割の方法でそれらを示し、より小さな配列をソートするよりも、小さなアレイで大きな配列を破ることができる、私はそれhereをデモするためにバイオリンを作成しました。それは間違っているに起因することができ、

computed: { 
    chunks() { 
    var size = 2, smallarray = []; 
    for (var i= 0; i<this.data.length; i+=size) { 
     smallarray.push(this.data.slice(i,i+size)) 
      } 
    return smallarray 
    } 
} 

---

をあなたの第二の問題については、問題がitemsが正しくthis.$http.getコールの後に読み込ま取得されていないということであれば：

以下のコードは小さなアレイでそれを破るためにありますthisも同様に修正することができ、以下のように修正することができる。