pasar el parámetro en la URL mediante vuejs y laravel

Quiero mostrar los datos con specefic ID en laravel utilizando vuejs. Puedo obtener el ID del enlace, pero parece que no hay ninguna solicitud enviada al controlador. api.php :

    <?php

use Illuminate\Http\Request;


Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::resource('user','API\UserController');
Route::resource('departement','API\DepartementController');
Route::resource('specialite','API\SpecialiteController')->parameters(['specialite'=>'id']);

mi controlador :

public function show($id)
    {
        $specialite=Specialite::with('dep')->findOrFail($id);
        $spec = Specialite::with('dep')->where('id',$specialite)->get();
        return $spec;
    }

mi opinión :

<script>
    export default {

        data(){
        return{
        specialites:{},
        form: new Form({
            id:'',
            name:'',
            user_id:'',
            bio:''
        }),
        id:0,
        }

        },

    methods: {
        loadspecialite(){
        //axios.get('api/user').then(({data})=>(this.enseignants=data.data));
        axios.get('api/specialite/'+this.id).then(response=>{this.specialites=response.data;});
    },
        created() {
            this.id=this.$route.params.id;
            this.loadspecialite();
            Fire.$on('AfterCreate',()=>{
            this.loadspecialite();

            })

        }
    }
</script>

Vue-router:

 let routes = [
  { path: '/Profile/:id', component: require('./components/a.vue').default },
]

gracias. la esperanza cdu me va a ayudar.

3 Respuestas

  • ajafari
    4 de mayo de 2019

    Cuando se utiliza resource método en la api de router que no necesita agregar parameters. Y supongo que es por algún problema en su "Vue Router".

  • Marc Newton
    4 de mayo de 2019

    En primer lugar, no veo cómo este.id de llevar la id del router como el que se crea no se garantiza que han sido despedidos DESPUÉS de que el router ha enrutado.

    Su loadspecialite debe obtener el valor de la currentRoute cuando se le llama y creo que el var es un poco mal:

    let id = this.$router.currentRoute.params.id;

    La ruta de recursos debe ser:

    Route::resource('specialite','API\SpecialiteController');

    El uri de la solicitud sería:

    axios.get(`/api/specialite/${id}`).then(...)

    Usted puede encontrar el exacto uri ruta de acceso para todos los inscritos rutas en Laravel mediante el uso de un terminal SSH para ejecutar la consola de comando: php artisan route:list

    Esto debe producir la siguiente:

    +--------+-----------+----------------------------------+------------------------+------------------------------------------------------------------------+--------------+
| Domain | Method    | URI                              | Name                   | Action                                                                 | Middleware   |
+--------+-----------+----------------------------------+------------------------+------------------------------------------------------------------------+--------------+
|        | GET|HEAD  | api/specialite                   | api.specialite.index   | App\Http\Controllers\API\ApplicationController@index                   | api,auth:api |
|        | POST      | api/specialite                   | api.specialite.store   | App\Http\Controllers\API\ApplicationController@store                   | api,auth:api |
|        | GET|HEAD  | api/specialite/create            | api.specialite.create  | App\Http\Controllers\API\ApplicationController@create                  | api,auth:api |
|        | GET|HEAD  | api/specialite/{specialite}      | api.specialite.show    | App\Http\Controllers\API\ApplicationController@show                    | api,auth:api |
|        | PUT|PATCH | api/specialite/{specialite}      | api.specialite.update  | App\Http\Controllers\API\ApplicationController@update                  | api,auth:api |
|        | DELETE    | api/specialite/{specialite}      | api.specialite.destroy | App\Http\Controllers\API\ApplicationController@destroy                 | api,auth:api |
|        | GET|HEAD  | api/specialite/{specialite}/edit | api.specialite.edit    | App\Http\Controllers\API\ApplicationController@edit                    | api,auth:api |

    P. S. no es necesario crear un objeto de formulario si usted no está enviando los archivos adjuntos, Laravel y axios volverá a usar JSON por defecto con peticiones ajax.

    Laravel devolverá un objeto JSON de forma predeterminada en respuesta a una llamada ajax JSON directamente a partir de un recurso en el controlador:

    function show($id) {

  return Specialite::findOrFail($id);

}

    Fallar devolverá un 400+ encabezado que a su vez puede ser manejado por axsios .captura

    .catch( error => { console.log(error.response.message) } )

    Laravel de mensajes de validación sería accesible a través de:

    .catch( error => { console.log(error.response.data.errors) } )

    Axios publicará un objeto/matriz como una petición JSON:

    data() {

    return {

        form: {
            id:'',
            name:'',
            user_id:'',
            bio:''
        },

    }
}

...

axios.post('/api/specialite',this.form).then(...);
  • RSM
    4 de mayo de 2019

    Creo que el código está funcionando bien. Es un error de formato en el Debido objeto componente. Básicamente, su created() controlador en el debido métodos, por lo que no se manejan cuando se ha creado el evento se realiza.

    // your code snippet where there is an issue
methods: {
    loadspecialite(){
    //axios.get('api/user').then(({data})=>(this.enseignants=data.data));
    axios.get('api/specialite/'+this.id).then(response=>{this.specialites=response.data;});
}, // end of loadspecialite
    created() {
        this.id=this.$route.params.id;
        this.loadspecialite();
        Fire.$on('AfterCreate',()=>{
        this.loadspecialite();

        })

    } // end of created
} //end of methods

    Lo que usted debe hacer es quitar el creado (a) de los métodos y también comprobar que la sintaxis de la función de nuevo.

    const Foo = {
  template: '<div>foo</div>'
}
const Bar = {
  template: '<div><span> got {{form}}</span></div>',
  data() {
    return {
      specialites: {},
      form: 'fetching...',
      id: 0,
    }

  },

  methods: {
    loadspecialite() {
     // test method for getting some data
      axios.get('https://httpbin.org/anything/' + this.id)
        .then(response => {
          this.form = response.data.url;
        }).catch(error => {
          console.error(error)
        })
    },
  }, // <- this is the end of methods {}
  
  /**
   *  Created method outside of methods scope
   */
  created() {
    this.id = this.$route.params.id;
    this.loadspecialite();
  }
}


// rest is vues demo router stuff
const routes = [{
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar/:id',
    component: Bar
  }
]
const router = new VueRouter({
  routes // short for `routes: routes`
})
const app = new Vue({
  router
}).$mount('#app')
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue Routed</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
   <style>
       button {
      padding: 0.75rem;
      background: #eee;
      border: 1px solid #eaeaea;
      cursor: pointer;
      color: #000
    }

    button:active {
      color: #000;
      box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
    }

   </style>
</head>

<body>

  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <span> Click a button </span>
      <router-link to="/foo"><button>Go to Foo</button></router-link>
      <router-link to="/bar/3"><button>Go to Where it will get the data</button></router-link>
    </p>
    <!-- route outlet -->
    <!-- component matched by the route will render here -->
    <router-view></router-view>
  </div>

</body>

</html>