Using the resource controller

0

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">&nbsp</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?

    
asked by FGB 25.04.2018 в 23:23
source

0 answers