使用vuejs和laravel在URL中传递参数

yiytaume  于 2023-01-31  发布在  Vue.js
关注(0)|答案(3)|浏览(142)

我想在laravel中使用vuejs显示具有特定ID的数据。我从链接中获得ID,但似乎没有向控制器发送请求。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>

用户路由器:

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

谢谢,希望你能帮我。

jbose2ul

jbose2ul1#

首先,我看不出www.example.com如何this.id从路由器中携带id,因为在路由器路由后,创建的id不一定会被触发。
您的loadspecialite应该在调用时从currentRoute获得值,我认为var有一点错误:

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

您的路线资源应为:
Route::resource('specialite','API\SpecialiteController');
请求URI将为:
axios.get(/api/specialite/${id}).then(...)
您可以通过使用SSH终端运行控制台命令来找出Laravel中所有注册路由的确切URI路径: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 |

另外,如果你不发送任何附件,就不需要创建表单对象,Laravel和axios将在 AJAX 请求中默认使用JSON。
默认情况下,Laravel将返回JSON对象,以响应直接来自控制器上资源的JSON AJAX 调用:

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(...);
clj7thdc

clj7thdc2#

我确信代码运行良好。这是vue组件对象中的格式错误。基本上,您的created()处理程序在due方法中,因此当创建的事件完成时,它不会被处理。

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

您应该做的只是从方法中删除created(),并再次检查函数的语法。
x一个一个一个一个x一个一个二个x

oug3syen

oug3syen3#

所有的东西都设置好了,只是你的show方法应该在JSON中响应:

use Illuminate\Http\Response;

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

相关问题