Laravel + Vue：如何将下拉组件选中值提交至数据库

问题场景 #

在Laravel + Vue项目中，AddFactorComponent.vue负责将用户输入值提交至数据库，该组件中嵌入了作为下拉选择列表的Factors_lists.vue组件，需要将Factors_lists.vue中选中的值一同提交到数据库。

解决方案 #

通过Vue父子组件传值实现，这里采用v-model绑定方式（最贴合表单场景的实现），步骤如下：

1. 修改Factors_lists.vue，支持父组件v-model绑定 #

让子组件遵循Vue的v-model规范：接收value属性，选中值变化时触发input事件通知父组件。

<template>
    <select v-model="localSelected">
        <option value="">Select your option</option>
        <option v-for="factors_list in factors_lists" :key="factors_list.id" :value="factors_list.id">
            {{ factors_list.name }}
        </option>
    </select>
</template>

<script>
export default {
    name: "Factors_lists",
    props: {
        value: {
            type: [Number, String],
            default: null
        }
    },
    data() {
        return {
            factors_lists: [],
            localSelected: this.value
        }
    },
    watch: {
        localSelected(newVal) {
            this.$emit('input', newVal);
        },
        value(newVal) {
            this.localSelected = newVal;
        }
    },
    mounted() {
        this.getPoluhenie();
    },
    methods: {
        getPoluhenie() {
            axios.get('/api/lists')
                .then(response => {
                    this.factors_lists = response.data;
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
}
</script>

2. 修改AddFactorComponent.vue，绑定选中值并提交 #

在父组件中通过v-model绑定子组件的选中值，提交时将该值与其他表单字段一同发送到后端。

<template>
  <div class="col-10">
    <div class="container-lg d-flex justify-content-center pt-1">
        <section class="data-tab" style="border: 1px solid white; width: 1200px">
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="/"><button type="button" class="btn-close btn-close-white" aria-label="Close"></button></a>
            </div>
            <div class="mb-3">
                <label for="factory_number" class="form-label">Factor evaluated by SI</label>
                <el-input v-model="factor" autosize type="textarea" placeholder=""/>
            </div>
            <div class="d-grid gap-2" >
                <label for="factory_number" class="form-label">Factor evaluated by SI</label>
                <!-- 用v-model绑定子组件选中值到父变量 -->
                <Factors_lists v-model="selectedFactorId"></Factors_lists>
            </div>
            <div class="mb-3">
                <label for="factory_number" class="form-label">Equipment ID</label>
                <el-input v-model="equipment_id" autosize type="textarea" placeholder=""/>
            </div>
            <div class="d-grid gap-2">
                <input @click.prevent="Add" class="btn third" value="Add">
            </div>
            <SpisokFactorComponent ref="spisok_factor_component"></SpisokFactorComponent>
        </section>
    </div>
</div>
</template>

<script>
import Factors_lists from './Factors_lists.vue';
import SpisokFactorComponent from './SpisokFactorComponent.vue';

export default {
    components: {
        Factors_lists,
        SpisokFactorComponent
    },
    data() {
        return {
            factor: '',
            equipment_id: '',
            selectedFactorId: null
        }
    },
    methods: {
        async Add() {
            // 基础表单验证
            if (!this.factor || !this.equipment_id || !this.selectedFactorId) {
                alert('请填写所有必填字段');
                return;
            }

            try {
                // 提交数据到后端
                await axios.post('/api/factors', {
                    factor: this.factor,
                    equipment_id: this.equipment_id,
                    factors_list_id: this.selectedFactorId
                });
                // 提交成功后重置表单
                this.factor = '';
                this.equipment_id = '';
                this.selectedFactorId = null;
                // 按需刷新列表组件
                this.$refs.spisok_factor_component.refresh?.();
                alert('提交成功');
            } catch (error) {
                console.error('提交失败:', error);
                alert('提交失败，请重试');
            }
        }
    }
}
</script>

3. 完善Laravel后端Controller，添加存储方法 #

在Factors_listsController中添加接收提交数据的方法（或新建专门的Factor控制器）：

<?php

namespace App\Http\Controllers;

use App\Models\Factors_lists;
use App\Models\Factor; // 假设存在对应的数据模型
use Illuminate\Http\Request;

class Factors_listsController extends Controller
{
    public function index() {
        $items = Factors_lists::all();
        return response()->json($items);
    }

    // 新增存储方法
    public function store(Request $request) {
        // 验证请求数据
        $validated = $request->validate([
            'factor' => 'required|string',
            'equipment_id' => 'required|string',
            'factors_list_id' => 'required|exists:factors_lists,id'
        ]);

        // 创建数据库记录
        Factor::create($validated);

        return response()->json(['message' => 'Factor created successfully'], 201);
    }
}

4. 添加API路由 #

在routes/api.php中补充POST路由：

Route::get('/lists', [Factors_listsController::class, 'index']);
Route::post('/factors', [Factors_listsController::class, 'store']);

关键说明 #

• 子组件通过prop接收初始值、$emit触发值变化，完全符合Vue的v-model规范，使用体验和原生表单元素一致。
• 前后端都要做数据验证，避免无效或非法数据进入数据库。
• 提交成功后可按需重置表单、刷新关联组件，提升用户体验。

内容的提问来源于stack exchange，提问作者Technician