Vue.jsとDataTable（jqueryプラグイン）を使用

Question

私はVue.jsとDataTableで新しく、あなたの中には統合の経験があることを願っています.. 誰かがその良い方法を統合するVue.js & DataTable（jquery plugin）？それだけで正常に動作しますが、私はそれが正しい方法だと確信したい...

\t var app = new Vue({ 
 

 
\t  el: '#root', 
 

 
\t \t data(){ 
 
\t \t  return{ 
 
       employees: [ 
 
        { 
 
         Name: 'Tiger Nixon', 
 
         Position: 'System Architect', 
 
         Office: 'tokyo', 
 
         Age: '61', 
 
         StartDate: '2011/04/25', 
 
         Salary: '$320,800', 
 
        }, 
 
       ], 
 
       name: '', 
 
       position: '', 
 
       office: '', 
 
       age: '', 
 
       startDate: '', 
 
       salary: '', 
 
       dataTable: null 
 
      } 
 
\t \t }, 
 

 
\t \t methods: { 
 
\t \t  addEmployee(){ 
 
\t \t \t this.dataTable.row.add([ 
 
\t \t \t  this.name, 
 
\t \t \t  this.position, 
 
\t \t \t  this.office, 
 
\t \t \t  this.age, 
 
\t \t \t  this.startDate, 
 
\t \t \t  this.salary, 
 
\t \t \t ]).draw(false); 
 
\t \t  } 
 
\t \t }, 
 

 
\t \t mounted(){ 
 
\t \t  this.dataTable = $('#data_table').DataTable({ 
 

 
\t \t  }); 
 
\t \t } 
 

 

 
\t })

#root{ 
 
    text-align: center; 
 
} 
 

 
.btn{ 
 
    margin-bottom: 30px; 
 
}

<div id="root" class="container"> 
 
\t <form class="form-inline"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label for="name">Name:</label><br> 
 
\t \t \t <input type="text" v-model="name" class="form-control" id="name"> 
 
\t \t </div> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label for="position">Position</label><br> 
 
\t \t \t <input type="text" v-model="position" class="form-control" id="position"> 
 
\t \t </div> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label for="office">Office</label><br> 
 
\t \t \t <input type="text" v-model="office" class="form-control" id="office"> 
 
\t \t </div> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label for="age">Age</label><br> 
 
\t \t \t <input type="text" v-model="age" class="form-control" id="age"> 
 
\t \t </div> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label for="Start_date">Start Date</label><br> 
 
\t \t \t <input type="text" v-model="startDate" class="form-control" id="start_date"> 
 
\t \t </div> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label for="salary">Salary</label><br> 
 
\t \t \t <input type="text" v-model="salary" class="form-control" id="salary"> 
 
\t \t </div><br><br> 
 
\t \t <button type="button" @click="addEmployee" class="btn btn-primary">Submit</button> 
 
\t </form> 
 
\t <table id="data_table" class="display" cellspacing="0" width="100%"> 
 
\t \t <thead> 
 
\t \t <tr> 
 
\t \t \t <th>Name</th> 
 
\t \t \t <th>Position</th> 
 
\t \t \t <th>Office</th> 
 
\t \t \t <th>Age</th> 
 
\t \t \t <th>Start Date</th> 
 
\t \t \t <th>Salary</th> 
 
\t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t <tr v-for="employee in employees"> 
 
\t \t \t <td>{{ employee.Name }}</td> 
 
\t \t \t <td>{{ employee.Position }}</td> 
 
\t \t \t <td>{{ employee.Office }}</td> 
 
\t \t \t <td>{{ employee.Age }}</td> 
 
\t \t \t <td>{{ employee.StartDate }}</td> 
 
\t \t \t <td>{{ employee.Salary }}</td> 
 
\t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
</div> 
 

 
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script> 
 
<script src="https://unpkg.com/vue@2.1.8/dist/vue.js"></script>

Answer 1

:) おかげで、私はvuejsを持つテーブルのための選択肢を好むのです。 これらのうちの1つは、ratiwのコンポーネントです。 https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/README.md

ブートストラップまたはセマンティックUIフレームワークと簡単に簡単に統合できます。また、非常にうまくカスタマイズ可能な並べ替えフィールドと検索だけでなく、APIからデータを取得するが、その部分は、APIの特定のデータの応答形式が必要としない限り、それは多くのコントロールを持っていない限り、

もう1つのオプションはhttps://github.com/matfish2/vue-tables-2です。 これはいくつかのjsxセットアップが必要なので、これをより難しくしていますが、最初のものよりも優れています。

UPDATE：VUE-テーブル-2は、正直なところ、私は上記の場合、またはからのいずれかのオプションを好むだろう今、プリコンパイル用意しており、任意の変換やローダー

を必要としない、あなたは、コンポーネントの形で別のものを見つけますawesome-vue（github上のvueコンポーネントのリスト）にあります。 このようなカスタムコンポーネントを使用することで、2つのライブラリ（jqueryとdatatables）がなくなり、vueの反応性がうまく機能します。

pdfのエクスポート、スタイルシートのエクスポート、または派手な印刷物が必要な場合を除き、なぜデータテーブルを使用すべきかわかりません。