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
'programing' 카테고리의 다른 글
이클립스 오류: "가져오기 XXX를 확인할 수 없습니다." (0) | 2022.07.29 |
---|---|
모키토:제네릭을 사용한 매처 리스트 (0) | 2022.07.29 |
Kotlin 어레이를 Java varargs로 변환 (0) | 2022.07.29 |
명령줄에서 Maven Javadoc 플러그인을 비활성화하려면 어떻게 해야 합니까? (0) | 2022.07.29 |
이 난독화된 C코드는 메인() 없이 실행된다고 주장하지만 실제로는 어떤 역할을 합니까? (0) | 2022.07.29 |