using Vue.js & DataTable(jquery plugin)

Question

i'm new in Vue.js and DataTable and i hope some of you have the experience with their integration.. can somebody say for sure that its a good way to integrate Vue.js & DataTable(jquery plugin)? it's works just fine but i want to be sure it's the right way... thanks :)

	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

I have worked to rebuild the DataTable jQuery plugin using only VueJS. So far, my project, VueDataTable, has the following features:

• multiple column sorting
• search filter
• pagination
• entry length options
• customization text
• language support for English, Portuguese, and Spanish

You can install it with npm. For more information, please check that out on Github and on demo projects (demo1, and demo2)

I hope this will help you or someone else. Actually, I came here to this question a couple of weeks ago, and then, after not finding a good solution, I decided to create VueDataTable.