Laravel Inertia(Vue)下拉框无法显示选中选项求助

问题根源 #

你遇到的错误是因为**form.locations的初始值是字符串类型（空字符串''）**，而字符串在JavaScript中属于原始值，无法动态添加属性。当你尝试执行form.locations.id = location.id时，必然会抛出创建属性失败的错误，同时下拉框也无法正常渲染选中项。

解决方案 #

1. 修正表单字段的初始类型

根据后端需要接收的数据格式，二选一调整：

方案A：存储完整地点对象（适合前端需展示多字段的场景）

在Vue组件初始化表单时，将locations设为空对象：

// 示例：用Inertia的useForm初始化表单
const form = useForm({
  // 其他表单字段...
  locations: {}
})

方案B：仅存储地点ID（更推荐，后端通常只需要关联ID）

将表单字段改为location_id，初始值设为空字符串：

const form = useForm({
  // 其他表单字段...
  location_id: ''
})

2. 调整下拉框的显示逻辑

根据所选方案，修改触发区的显示逻辑：

对应方案A

<template>
  <!-- 下拉框触发区 -->
  <div class="dropdown-trigger">
    {{ form.locations.name || '请选择地点' }}
  </div>
</template>

对应方案B

从传入的locations数组中匹配选中ID对应的名称：

<template>
  <!-- 下拉框触发区 -->
  <div class="dropdown-trigger">
    {{ locations.find(loc => loc.id === form.location_id)?.name || '请选择地点' }}
  </div>
</template>

3. 调整选项点击事件逻辑

替换原来的form.locations.id = location.id，改为对应方案的赋值方式：

对应方案A

直接将选中的地点对象赋值给form.locations：

const selectLocation = (location) => {
  form.locations = location
}

对应方案B

仅赋值地点ID：

const selectLocation = (location) => {
  form.location_id = location.id
}

4. 后端接收处理

如果选择方案B，在CompanyController的store方法中直接接收location_id字段并存储：

public function store(Request $request)
{
    $validated = $request->validate([
        // 其他验证规则...
        'location_id' => 'required|exists:locations,id'
    ]);

    Company::create($validated);

    // 后续跳转/响应逻辑...
}

效果验证 #

调整后，下拉框选中选项时会正常显示选中内容，控制台不再报错，同时选中的地点ID（或对象）可正常传递到后端完成存储。

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