Vuejs：使用 axios 制作依赖下拉列表答案

【问题标题】：Vuejs : Making dependent dropdown with axiosVuejs：使用 axios 制作依赖下拉列表
【发布时间】：2020-12-14 20:40:42
【问题描述】：

我在显示相关下拉列表时遇到问题。它获取了医院，但对于专业，它给了我一个没有错误的空数组，如下图所示：

我找不到我的错误在哪里它没有显示像这样的图像：

这是我的路线：

// Hospital
Route::get('hospital', 'ApiController@getHospital');
// Speciality
Route::get('speciality', 'ApiController@getSpeciality');

我的控制器：

// Speciality
public function getSpeciality(Request $request)
{
    $hosId = $request->input('hospital_id');
    
    $data = DB::table('tr_hospital_specialists as tr')
        ->select('tr.id','hospital_id','specialist_id','specialist_name')
        ->join('mst_specialists as sp', 'tr.specialist_id', '=', 'sp.id')
        ->join('mst_hospitals as hos', 'tr.hospital_id', '=', 'hos.id')
        ->where('hospital_id', $hosId)
        ->orderBy('specialist_name','asc')
        ->get();

    if ($data) {
        return response()->json([
            'success' => true,
            'message' =>'success',
            'data'    => $data
        ], 200);
    } else {
        return response()->json([
            'success' => false,
            'message' => 'Data not found.',
        ], 400);
    }
}

我的看法：

<div class="form-row">
    <div class="form-group col-md-6">
        <label class="text-white">Hospital</label>
        <model-list-select :list="hospital"
            v-model="optHospital"
            @change="getSpeciality"
            option-value="id"
            option-text="hospital_name"
            placeholder="Choose Hospital">
        </model-list-select>
    </div>
    <div class="form-group col-md-6">
        <label class="text-white">Speciality</label>
        <model-list-select :list="speciality"
            v-model="optSpeciality"
            option-value="specialist_id"
            option-text="specialist_name"
            placeholder="Choose Speciality">
        </model-list-select>
    </div>
</div>

这是我的脚本：

谢谢。

【问题讨论】：

尝试让它在没有服务器的情况下工作，只在组件本身内部提供数据。那你可以问一个更好的问题。
$hosId = $request->input('hospital_id'); 到 $hosId = $request->input('hospital'); 发送 hospital 作为 vuejs 的密钥
@sureshvv 我已经尝试过使用静态数据并且它可以工作
如果它适用于静态数据，则问题出在服务器代码上。使用 Postman 或 curl 来识别问题。 @Fenz
@sureshvv 看起来问题出在后端，即使数据库中已经存在数据link

标签： laravel vue.js axios

【解决方案1】：

将您的控制器 $hosId = $request->input('hospital_id'); 修改为 $hosId = $request->hospital');

// Speciality
public function getSpeciality(Request $request)
{
    $hosId = $request->hospital;  // as u r sending  hospital key from axios
    
    $data = DB::table('tr_hospital_specialists as tr')
        ->select('tr.id','hospital_id','specialist_id','specialist_name')
        ->join('mst_specialists as sp', 'tr.specialist_id', '=', 'sp.id')
        ->join('mst_hospitals as hos', 'tr.hospital_id', '=', 'hos.id')
        ->where('hos.hospital_id', $hosId)
        ->orderBy('sp.specialist_name','asc')
        ->get();

    if ($data) {
        return response()->json([
            'success' => true,
            'message' =>'success',
            'data'    => $data
        ], 200);
    } else {
        return response()->json([
            'success' => false,
            'message' => 'Data not found.',
        ], 400);
    }
}

你需要从 axios 发送

axios.get('...',{params:{hospital:this.optHospital}}) // as optHospital is selected array

【讨论】：

我试过了，结果还是和以前一样
然后签入控制器dd($request->all() 并检查所有选定的数据是否正常
但是，当我尝试使用静态值 $ hospital = 2;并执行 dd，它有效。
我不明白你是否尝试与我提到的相同的代码，它应该可以工作，如果不是，你得到的错误在哪里，请解释
我会先确认api后端，因为我认为问题出在请求上

【解决方案2】：

首先，您需要通过 hospital_id 获取专科，第二件事：如果您的专科响应会在 hostpital 响应之前被捕获怎么办？您需要将专科请求绑定到医院选择的选项。

【讨论】：