übergeben Sie parameter in der URL mit vuejs und laravel

Ich will die Anzeige von Daten mit specefic ID in laravel mit vuejs. Bekomme ich die ID aus dem link, aber es scheint, dass es keine Anfrage an den controller gesendet. 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']);

mein controller :

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

meine Ansicht :

<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 },
]

danke. hoffe tou mir helfen wird.

3 Antworten

  • ajafari
    4. Mai 2019

    Bei Verwendung von resource Methode in der api-router, den es keine Notwendigkeit zum hinzufügen von parameters. Und ich denke, es ist ein problem in Ihrem "Vue Router".

  • Marc Newton
    4. Mai 2019

    Erstens, ich sehe nicht, wie dieser.id tragen Sie die id vom router erstellt wurden, ist nicht gewährleistet, dass Sie gefeuert wurden, NACHDEM der router geroutet.

    Ihr loadspecialite sollte der Wert von currentRoute wenn Sie aufgerufen wird, und ich denke, dass der var ist ein wenig falsch:

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

    Ihre route Ressource sein sollte:

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

    Der request-uri wäre:

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

    Sie können herausfinden, die genaue uri-Pfad für alle registrierten Routen in Laravel durch die Verwendung eines SSH-terminal, um ausgeführt Konsole mit dem Befehl: php artisan route:list

    Diese erzeugen soll, die folgenden:

    +--------+-----------+----------------------------------+------------------------+------------------------------------------------------------------------+--------------+
| 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. es gibt keine Notwendigkeit, ein form Objekt erstellen, wenn Sie nicht senden Sie keine Anhänge, Laravel und axios wieder verwenden JSON standardmäßig mit ajax-Anfragen.

    Laravel wird return JSON-Objekt per default-in Reaktion auf eine JSON ajax-Aufruf direkt aus einer Ressource auf Ihrem controller:

    function show($id) {

  return Specialite::findOrFail($id);

}

    Scheitern zurück 400+ header, die wiederum verarbeitet werden kann axsios .fangen

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

    Laravel von Prüfmeldungen wäre erreichbar über:

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

    Axios post wird ein Objekt/array als JSON Anfrage:

    data() {

    return {

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

    }
}

...

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

    Ich glaube, dass der code funktioniert einwandfrei. Es ist ein Formatierungsfehler in der Aufgrund component object. Im Grunde Ihres created() - handler ist in der aufgrund der Methoden, so wird es nicht gehandhabt werden, wenn die erstellte Veranstaltung erfolgt.

    // 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

    Was Sie tun sollten ist entfernen Sie einfach die erstellte() von Methoden und prüfen Sie die syntax der Funktion wieder.

    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>