Utilizing jQuery data-table within Vue.js in a laravel project has presented an issue for me. Although the data loads successfully into the data-table, there seems to be a problem with retrieving the data after it has been loaded. Specifically, the first row in the data-table displays "there is not any data" even though there should be data present. What steps can I take to effectively use jQuery data-table in conjunction with Vue.js?
Below is a snippet from my app.js file:
const platform = {
el: '#platform',
data: {
name: '',
platforms: [],
},
methods: {
index() {
axios.get('/api/platforms', {
headers: headers
}).then(response => {
this.platforms = response.data.data;
this.dataTable.row.add([
this.platforms
]);
}).catch(error => {
alert(error.response.data.message);
})
},
store() {
axios.post('/api/platforms', {
params: {
name: this.name
}
}, {
headers: headers
}).then(response => {
this.platforms.push(response.data.data);
alert(response.data.message);
}).catch(error => {
if (error.response.status === 422) {
this.message = error.response.data.data['validation-errors']['params.name'];
} else {
this.message = error.response.data.message;
}
})
},
},
mounted() {
this.index();
},
};
Additionally, here is a segment from the platform.blade.php file:
<section class="content" id="platform">
<div class="form-group">
<input type="text" v-model="name">
</div>
<button class="btn btn-raised" @click.prevent="store()">save</button>
<div class="row">
<table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th>platform name</th>
</tr>
</thead>
<tbody>
<tr v-for="(platform, index) in platforms">
<td>{{ platform.name }}</td>
</tr>
</tbody>
</table>
</div>
</section>