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

Question

私はVue.jsとDataTableを初めて使用しますが、それらの統合の経験がある方がいらっしゃると思います。Vue.jsとDataTable（jqueryプラグイン）を統合する良い方法だと誰かが確信できますか？それはうまく機能しますが、私はそれが正しい方法であることを確認したいです...ありがとう:)

        var app = new Vue({

            el: '#root',

                data(){
                    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
            }
                },

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

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

                    });
                }


        })

#root{
  text-align: center;
}

.btn{
  margin-bottom: 30px;
}

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

Answer 1

私はVueJSのみを使用してDataTablejQueryプラグインを再構築するために取り組んできました。これまでのところ、私のプロジェクト VueDataTable には、次の機能があります。

• 複数列の並べ替え
• 検索フィルター
• ページネーション
• エントリの長さのオプション
• カスタマイズテキスト
• 英語、ポルトガル語、スペイン語の言語サポート

Npmでインストールできます。詳細については、 Github およびデモプロジェクト（ demo1 、および demo2 ）で確認してください。

これがあなたや他の誰かの助けになることを願っています。実際、私は数週間前にこの質問に来ましたが、適切な解決策が見つからなかったため、VueDataTableを作成することにしました。