在 Vue.js 中显示具有关系的 Laravel 数据答案

【问题标题】：Display Laravel Data with Relationships in Vue.js在 Vue.js 中显示具有关系的 Laravel 数据
【发布时间】：2019-05-03 12:15:24
【问题描述】：

我正在使用 Vue.js、Vue Router、Axios 和 Laravel 构建一个 SPA。我的用户表中有一个外键来标识用户的“位置”。我正在尝试使用用户表中的外键从 Locations 表中提取 location_name 。控制台显示位置为空。

用户模型中的关系

<?php

public function location()
{
    return $this->belongsTo('App\location','location');
}

位置模型中的关系

<?php

public function User()
{
    return $this->hasMany('App\User');
}

控制器

<?php

public function show($id){
    $User = User::with('location')->find($id);

    return response()->json($User);
}

脚本

 export default {
    data: function() {
        return {
            tech:[]
        }
    },
    mounted() {
        axios.get('/tech/' + this.$route.params.id).then(response=>this.tech=response.data);
    }
}

查看

<input type="text" v-model="tech.location.location_name">

routes.js

   let routes = [
    {
        path:'/',
        component:require('./views/dashboard/dashboard')
    },

    {
        path:'/locations',
        component:require('./views/locations/locations')
    },

    {
        path:'/allLocations',
        component:require('./views/locations/allLocations')
    },
    {
        path:'/inActiveLocations',
        component:require('./views/locations/inActiveLocations')
    }
    ,
    {
        path:'/newLocation',
        component:require('./views/locations/newLocation')
    }
    ,
    {
        path:'/location/:id',
        component:require('./views/locations/location')
    }
    ,
    {
        path:'/editLocation/:id',
        component:require('./views/locations/editLocation')
    }
    ,
    {
        path:'/techs',
        component:require('./views/techs/techs')
    }
    ,
    {
        path:'/createTech',
        component:require('./views/techs/createTech')
    },
    {
        path:'/tech/:id',
        component:require('./views/techs/tech')
    }

web.php

 <?php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

/* Locations*/
Route::post('/location','locationController@store');
Route::get('/locations','locationController@index');
Route::get('/inActiveLocations','locationController@inActiveLocations');
Route::get('/allLocations','locationController@allLocations');
Route::get('/location/{id}','locationController@show');
Route::get('/editLocation/{id}','locationController@edit');
Route::patch('/updateLocation/{id}','locationController@update');



/*Users*/
Route::get('/techs','techController@index');
Route::post('/tech','techController@store');
Route::get('/tech/{id}','techController@show');

【问题讨论】：

调试101：1）我没用过axios，但是你试过console.logresponse.data变量吗？以 vue-resource 为例，数据将在response.body 下。 2）控制台中是否有任何错误？ 3）您确定关系正确并返回位置吗？也许类名/命名空间不正确？ 4) 具有提供的 ID 的用户是否存在？该用户所属的位置是否存在？编辑：您确实检查了控制台，抱歉。
突出的是您的第一个关系使用'App\location' 作为类名，按照惯例，这不是类的名称。类名应遵循PascalCase 表示法。为了更好的代码稳定性，请使用public function location() { return $this->belongsTo(Location::class); }。
请显示您的路线@TA
@saurabhkamble 我已经添加了路线。

标签： laravel vue.js eloquent axios vue-router

【解决方案1】：

您需要对代码进行一些更改。您正在尝试检索属性而不是关系。要获取位置，您需要进行以下更改。

public function show($id){
    $User = User::find($id);
    $response = $User;
    $response['location'] = $User->location;
    return response()->json($response);
}

【讨论】：

我做了那个改变。这得到了显示的外键。谢谢。有关如何根据该键显示位置表中的 location_name 的任何建议？
我会使用 Tinker 检查 $User（来自您的代码）和 $response（来自 Dhavals 代码）返回的内容。我想知道tech.location.location_name 是否应该是tech.location.name。另请注意，Laravel 类名应该在 StudlyCaps 中（在您的情况下，只需使用大写 L 的 Location），但 PHP 变量名通常以小写字母开头（$user）。
对于 location_name，您必须执行 $response['location_name'] = $User->location->location_name 之类的操作。还要遵循@Pida 所说的约定。
不需要手动将location 关系分配给属性。由response()->json($data) 调用的toArray() 也将正确返回关系，如果它们急切地加载了with('relationship')（问题代码中就是这种情况）。