在 Laravel 中获取用户详细信息并在 Vue.js 中显示，而不使用 Axios

Question

我有一个列出用户的表，每个用户都有一个与其数据 ID 关联的

onClick

功能按钮。当我单击按钮时，它会调用函数

getUserDetails(1)

从 Laravel 函数中获取数据，然后发送响应。之后，将打开一个包含数据的弹出窗口。

这是我的 Vue 函数：

const response = ref([]);
const popup = ref(false);

const getUserDetails = (id) => {
  response.value = route.get(route('user.Details', {id: id})); // I think there might be a mistake here
  popup.value = true; 
}

我有一个网络路线：

Route::get('/userDetails/{id}', [UserController::class, 'details'])->name('user.Details');

这是我的

UserController

：

public function details($id) {
  $userDetails = User::find($id);
  return $userDetails; // How should I return this? response()->json($userDetails) or something else?
}

还有其他不使用axios的进程吗？

Answer 1

在您的 Vue 函数中，您在获取用户详细信息的方式上存在错误，这是正确的。您应该使用 Axios 或类似的 HTTP 客户端库在 Vue.js 中发出 AJAX 请求。但是，如果您不想使用 Axios，则可以使用现代浏览器中内置的

fetch

API。

以下是如何更新 Vue 函数以使用

fetch

：

import { ref } from 'vue';

const response = ref({});
const popup = ref(false);

const getUserDetails = (id) => {
  fetch(`/userDetails/${id}`)
    .then(response => response.json())
    .then(data => {
      response.value = data;
      popup.value = true;
    })
    .catch(error => {
      console.error('Error fetching user details:', error);
    });
}

在 Laravel 控制器中，您应该以 JSON 响应的形式返回用户详细信息：

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function details($id) {
        $userDetails = User::find($id);
        return response()->json($userDetails);
    }
}

完成这些更改后，单击 Vue 应用程序中与每个用户关联的按钮将使用 Laravel 中的

/userDetails/{id}

端点获取他们的详细信息，并在弹出窗口或模式中显示它们。