Vue 2 Laravel 5.3 Eloquent 无法从对象中检索数据

Posted 2023-02-22

【中文标题】Vue 2 Laravel 5.3 Eloquent 无法从对象中检索数据

【英文标题】：Vue 2 Laravel 5.3 Eloquent unable to retrieve data from object

【发布时间】：2017-06-19 00:57:03

【问题描述】：

到目前为止，Vue2 对我来说已经很好地阅读了 eloquent，但除了这一点我很难调试。

Shop-show.vue

<template>
.....
.....
    <div class="row">
      shop.user.id
    </div>
.....
.....
</template>

<script>
  export default
    mounted()
        this.getShop()
    ,
    methods:
        getShop()
            var vm = this
        vm.$http.get('/getShop/'+vm.shopId).then((response)=>
            vm.shop = response.data.data.shop
        )
    ,
.....
.....
 
</script>

ShopController.php

.....
.....
    public function getShop($id)
    
      $shop = Shop::where('id',$id)->with('user')->firstOrFail();
      $response = [
          'data' => [
              'shop' => $shop
          ]
      ];
      return response()->json($response);
    
.....
.....

web.php

Route::get('/getShop/id', 'ShopController@getShop');

在这里，当我在模板中渲染 shop.user 时，它给了我非常好的用户对象，包括 id 和 name 等信息，但是当我执行 shop.user.id 或 shop.user.name 时，控制台日志错误如下

错误#1

[Vue 警告]：在渲染组件时出错 /Applications/XAMPP/xamppfiles/htdocs/soyegg/resources/assets/js/components/Shop/Shop-show.vue：

错误#2

未捕获的类型错误：无法读取未定义的属性“id” 在 Proxy.render （评估在 (app.js:335), :46:47） 在 VueComponent.Vue._render （评估在（app.js:444），：3096:22） 在 VueComponent.eval (eval at (app.js:444), :2464:21) 在 Watcher.get (eval at (app.js:444), :1663:27) 在新的观察者处（评估在 (app.js:444), :1655:12） 在 VueComponent.Vue._mount (eval at (app.js:444), :2463:19) 在 VueComponent.Vue$3.$mount（评估在 (app.js:444), :6104:15） 在 VueComponent.Vue$3.$mount（评估在（app.js:444），：8494:16） 在初始化（评估在（app.js：444），：2777：11） 在 createComponent (eval at (app.js:444), :4120:9)

这从未发生过，非常奇怪。请帮忙。

【问题讨论】：

shop 定义在 vue 实例的data 中？

这是什么意思？

Saurabh 确实解决了这个问题，但是这个问题仍然对任何可以提供更好和更正确答案的人开放。敬请期待。

【参考方案1】：

当您从getShop 方法（这是一个异步方法）加载vm.shop 时，在填充vm.shop 之前您将没有任何内容，因此最初您会收到此错误。

为防止出现此错误，您可以在使用它之前进行空检查，在v-if 的帮助下，如下所示：

<template>
.....
.....
    <div class="row" v-if="shop && shop.user">
      shop.user.id
    </div>
.....
.....
</template>

【讨论】：

感谢您的回复@Saurabh。但这似乎无法解释为什么我 shop.user 确实包含对象但 shop.user.id 给出错误。正如你所说，我刚刚尝试了v-if，但发生了同样的错误。

对不起。我只是按照您所说的进行改进，现在可以使用了。但这似乎很麻烦，每次我需要为这个简单的任务做 v-if。我应该怎样做才能更好地改进我的代码？