VueJs + Larabel을 사용하여 관계를 가진 데이터를 가져오는 방법

VueJs + Larabel을 사용하여 관계를 가진 데이터를 가져오는 방법

vuejs를 사용하여 테이블에 사용자 이름을 표시하려면 어떻게 해야 합니까?

사용자 및 게시물 테이블과 관계를 설정했습니다.사용자는 많은 게시물을 가지고 있으며 게시물은 사용자의 것입니다.

투고 내용vue 템플릿 이제 포스트 테이블 데이터를 표시할 수 있습니다.

<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);
 }

posts 테이블에 user_id가 있기 때문에 vuejs를 사용하여 테이블에 사용자 이름을 표시하는 방법은 무엇입니까?

그래서 Larabel 문서화를 통해 컨트롤러의 "with" 함수를 다음과 같이 전달할 수 있다는 것을 알게 되었습니다.

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

그러면 게시물과 해당 게시물의 사용자 데이터도 제공되므로 다음과 같이 액세스할 수 있습니다.

{{ post.user.name }}

기록해주셔서 감사합니다. 정말 도움이 됩니다.

나는 라라벨에서 관계 링크를 하고 있었는데, 아직 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>

VUE 구성 요소의 Laravel 관계에 액세스하려면 Laravel Eager 로딩이 제대로 작동합니다.메서드와 함께 사용합니다().예를들면,

public function recent_orders() {

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

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

이제 우리가 쓸 수 있는 관계에 접근하려면

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

언급URL : https://stackoverflow.com/questions/49930564/how-to-fetch-data-with-relationship-using-vuejs-laravel