I'm trying to populate a dynamic table using Vue, but by calling the resource manager, it returns the json and removes my view, where the table is, I've reviewed and tried several ways to call the controller on the route, but nothing. Here the code
route
Route::get('/gestionarvehiculos','VehiculosController@gestion');
Route::resource('gestionarvehiculos', 'VehiculoController');
Controller
public function index()
{
$vehiculos = Vehiculo::get();
return $vehiculos;
}
View
....
<table class="table table-hover table-sprite">
<thead>
<tr>
<th>ID</th>
<th>Matricula</th>
<th>Marca</th>
<th>Modelo</th>
<th>Capacidad</th>
<th>Fabricacion</th>
<th>Color</th>
<th>Estado</th>
<th>Editar</th>
<th>Borrar</th>
<th colspan="2"> </th>
</tr>
</thead>
<tbody>
<tr v-for="vehiculo in parque">
<td width="100px">@{{vehiculo.id}}</td>
<td width="100px">@{{vehiculo.matricula}}</td>
<td width="100px">@{{vehiculo.marca}}</td>
<td width="100px">@{{vehiculo.modelo}}</td>
<td width="100px">@{{vehiculo.capacidad}}</td>
<td width="100px">@{{vehiculo.fabricacion}}</td>
<td width="100px">@{{vehiculo.color}}</td>
<td width="100px">@{{vehiculo.estado}}</td>
<td width="10px"><a href="#" class="btn btn-warning btn-sm">Editar</a> </td>
<td width="10px"><a href="#" class="btn btn-danger btn-sm">Borrar</a> </td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-6">
<pre>
@{{$data | json}}
</pre>
</div>
app.js
require('./bootstrap');
window.Vue = require('vue');
const app = new Vue({
el: '#crud',
created: function(){
this.getVehiculos();
},
data:{
parque: []
},
methods: {
getVehiculos: function() {
var urlVehiculos = 'gestionarvehiculos';
axios.get(urlVehiculos).then(response => {
this.parque = response.data
})
}
},
});
What's wrong?