如何使用 VueJs + Laravel 获取具有关系的数据

Question

如何使用 vuejs 在 table 中显示用户名？

我的用户和 post 的 table 设置了关系。一个用户有很多个post，一个post属于一个用户

在我的 Posts.vue 模板中，我现在可以显示 post table 数据：

<tr v-for="post in posts">
    <td>{{ post.id }}</td>
    <td>{{ post.title }}</td>
    <td>{{ post.body | snippet }}</td>
</tr>

脚本如下所示：

<script>
    export default {
        data(){
            return{
                posts: []
            }
        },

        methods: {
            showPosts(){
                axios.get('/app/posts').then(response => {
                    this.posts = response.data.posts;
                });
            }
        },
       mounted(){
            this.showPosts();
       }
    }
</script>

我的 PostController 在索引函数中看起来像这样

 public function index()
 {
    //
    $posts = Post::all();
    return response()->json([
        'posts' => $posts,
    ], 200);
 }

因为我在 post 的 table 中有 user_id，如何使用 vuejs 在 table 中显示用户名？

Answer 1

所以我从 Laravel 文档中发现我可以像这样在我的控制器中传递 "with" 函数：

$posts = Post::with('user')->get();

这给了我 posts 和那个 post 的用户数据，这让我可以像这样访问：

{{ post.user.name }}

Answer 2

感谢您记录这一点，它确实有帮助。

我在 laravel 中进行关系链接，尚未准备好使用 api 但使用 with() 方法，在我的 vuejs 代码中引用关系数据是一件轻而易举的事。

不工作： Laravel

public function index()
{
  if (request()->q){
    $search = request()->q;

    $searches =  User::whereHas('doctor') 
      ->where(function ($query) use ($search){
        $query->where('name', 'like', "%$search%")
              ->orWhere('email', 'like', "%$search%");
      })->paginate(5);
  }

  return $searches;
}

工作： Laravel

public function index()
{
  if (request()->q){
    $search = request()->q;

    $searches =  User::with('doctor')->whereHas('doctor') 
      ->where(function ($query) use ($search){
        $query->where('name', 'like', "%$search%")
              ->orWhere('email', 'like', "%$search%");
      })->paginate(5);
  }
  return $searches;
}

用法：VueJs

... <span v-text="search.doctor.specialty"></span>

Answer 3

访问 VUE 组件中的 laravel 关系 Laravel Eager loading 效果很好。使用 with() 方法。例如，

public function recent_orders() {

     $orders = Order::with('service')->where('user_id', Auth::User()->id)->get();

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

现在访问我们可以写的关系，

<p>{{ order.service.name }}</p>

如何使用 VueJs + Laravel 获取具有关系的数据

How to fetch data with relationship using VueJs + Laravel

vuejs2

laravel-5.6