передать параметр в URL используя vuejs и laravel

Question

Я хочу отображать данные со специальным идентификатором в laravel, используя vuejs.Я получаю идентификатор по ссылке, но, похоже, к контроллеру нет запроса. 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']);

мой контроллер:

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

мой взгляд:

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

спасибо.надеюсь, ты поможешь мне.

Answer 1

Во-первых, я не вижу, как this.id будет переносить идентификатор с маршрутизатора, поскольку созданный файл не гарантированно будет запущен ПОСЛЕ маршрутизатора.

Ваш loadspecialite должен получить значение из currentRoute при вызове, и я думаю, что переменная немного ошибочна:

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

Ваш ресурс маршрута должен быть:

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

Запрос URI будет:

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

Точный путь URI для всех зарегистрированных маршрутов в Laravel можно узнать с помощью терминала SSH для запуска консольной команды: php artisan route:list

Это должно привести к следующему:

+--------+-----------+----------------------------------+------------------------+------------------------------------------------------------------------+--------------+
| 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. нет необходимости создавать объект формы, если вы не отправляете никаких вложенных файлов, Laravel и axios по умолчанию вернутся для использования JSON с запросами ajax.

Laravel вернет объект JSON по умолчанию в ответ на AJAX-вызов JSON напрямую из ресурса на вашем контроллере:

function show($id) {

  return Specialite::findOrFail($id);

}

Fail вернет заголовок 400+, который, в свою очередь, может быть обработан axsios .catch

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

Laravel из проверочных сообщений будет доступен через:

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

Axios опубликует объект / массив как JSON-запрос:

data() {

    return {

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

    }
}

...

axios.post('/api/specialite',this.form).then(...);

Answer 2

Я верю, что код работает нормально. Это ошибка форматирования в объекте компонента vue. В основном ваш обработчик created() находится в надлежащих методах, поэтому он не будет обработан, когда будет создано созданное событие.

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

Что вам нужно сделать, это просто удалить create () из методов и еще раз проверить синтаксис функции.

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>

Answer 3

Все настроено хорошо, только ваш метод show должен отвечать в JSON:

use Illuminate\Http\Response;

function show($id) {
    result = Specialite::findOrFail($id);
    return response()->json($result,Response::HTTP_OK);
}