Svelte表单编辑时PDF选择框无法预填问题求助

问题描述 #

开发的表单支持文本、图片输入及PDF选择功能，编辑状态下文本域能正常显示预填值，但PDF选择框始终为空，无法加载已选的PDF选项。

问题排查与修复步骤 #

1. 修正预填逻辑的数据源错误 #

原onMount中的查找逻辑存在问题：

// 错误代码
if (isEdit) {
    selectedDocument = data.find((doc) => doc.value === formInput.projectId);
}

• 问题点：data是接口返回的原始数据，不存在value字段；且selectedDocument需要是经过map处理后、带有value和label的对象，才能被svelte-select识别。

修复后的代码：

onMount(async () => {
    const data = await api.get('/documents');
    console.log({ data });

    documents = data.map((doc) => ({ value: doc.id, label: doc.name }));

    if (isEdit) {
        // 从转换后的documents数组中查找匹配项
        selectedDocument = documents.find(doc => doc.value === formInput.projectId);
    }
});

2. 修复自定义SelectInput组件的选中项绑定 #

原SelectInput组件未将selectedItem传递给底层的svelte-select，导致预填值无法同步到选择框。

修复后的SelectInput组件代码：

<script>
    import Select from 'svelte-select';

    export let items = [];
    export let selectedItem = undefined;
    export let id;
    export let name;
    export let label;

    function handleSelect(event) {
        selectedItem = event.detail;
    }

    function handleClear() {
        selectedItem = undefined;
    }
</script>

<div class={`themed ${$$props.class}`}>
    <label for={id} class="block text-base font-medium text-gray-700">{label}</label>
    <!-- 绑定selected属性实现双向同步 -->
    <Select 
        {id} 
        {items} 
        {name} 
        bind:selected={selectedItem}
        on:select={handleSelect} 
        on:clear={handleClear} 
    />
</div>

额外注意事项 #

确保documents和selectedDocument是Svelte响应式变量，需用let声明：

let documents = [];
let selectedDocument = undefined;

总结 #

• 预填逻辑错误使用了原始接口数据作为数据源，应改用转换后的documents数组
• 自定义选择组件缺失选中项与底层组件的绑定，导致预填值无法传递到选择框

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