Я предлагаю вам зайти на youtube для поиска учебных пособий по laravel / vue, там есть множество хороших ресурсов, которые могут вам помочь.
Для того, что вы пытаетесь достичь, если вы хорошо смонтировали свой компонент и видите фиктивный тест в компоненте в своем браузере, то вы уже на полпути.
Внутри вашего подключенного хука вашего компонента vue сделайте вызов API для вашего бэкэнда (laravel), чтобы получить таких пользователей:
axios.get('/get_all_users').then((res)=>{
this.users = res.data
//do a console.log(res.data) to ensure you are getting the users collection
}).catch((err) => {
console.log(err)
});
Внутри вашего объекта данных создайте пустой массив, который будет содержать ваших пользователей таким образом;
data(){
return{
users: []
}
}
Теперь внутри вашего web.php создайте GET-маршрут для этого вызова API;
ROUTE::get('/get_all_users', 'UsersController@FetchUsers');
Обратите внимание, что ваш контроллер и метод не обязательно должны иметь имя, как указано выше, создайте контроллер, а внутри напишите метод для извлечения пользователей и использования их здесь как можно скорее;
Внутри вашего контроллера напишите свой метод;
public function FetchUsers(){
$users = User::latest()->get();
return response()->json($users, 200);
}
Также обратите внимание, что вам нужно будет импортировать вашу модель User в верхней части файла контроллера, например так:
use App\User;
Также убедитесь, что у вас уже есть созданная модель пользователя, которая относится к вашей таблице пользователей;
К настоящему времени вы должны увидеть массивы пользователей в консоли инструментов браузера вашего разработчика, если все в порядке.
Затем в вашем шаблоне итерируйте данные пользователей следующим образом:
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }} </td>
<td>{{ user.name }} </td>
<td>{{ user.email }} </td>
<td>{{ user.created_at }} </td>
</tr>
Я буду рад помочь, если вам понадобятся дальнейшие разъяснения.