Svelecte创建新选项时显示[object Object]问题排查

云原生阿岚

2026-8-2

问题原因及修复方案

你的问题出在新创建的选项数据结构和初始categories不匹配，以及Svelte响应式更新的处理上：

1. 核心问题

初始的data.categories应该是对象数组（比如每个元素包含label和value字段，这是Svelecte默认的选项结构），但你在newCategory里直接把字符串c.detail.valuepush进了数组。当切换选择时，Svelecte会尝试把这个字符串当作选项对象处理，因此显示成[object Object]。

2. 修复步骤

第一步：修改`newCategory`函数，保持选项结构一致

假设你的初始categories结构是[{ label: '分类名称', value: '分类值' }, ...]，修改函数如下：

function newCategory(c) {
  // 创建和初始选项结构一致的对象
  const newCategory = {
    label: c.detail.value,
    value: c.detail.value // 也可以用自定义唯一值，比如Date.now()
  };
  // 用扩展运算符更新数组，触发Svelte响应式更新
  categories = [...categories, newCategory];
}

第二步：确认初始`categories`结构正确

检查+page.server.js（或+page.js）的load函数返回的categories，必须是对象数组，示例：

export async function load() {
  return {
    categories: [
      { label: '前端', value: 'frontend' },
      { label: '后端', value: 'backend' }
    ]
  };
}

第三步：可选：适配自定义选项字段

如果你的初始选项用的是其他字段名（比如name/id），需要在Svelecte组件上配置对应字段：

<Svelecte 
  id="category" 
  options={categories} 
  creatable={true}
  on:createoption={newCategory}
  bind:value={selected}
  on:change={do_something}
  labelField="name"  // 你的选项标签字段名
  valueField="id"    // 你的选项值字段名
></Svelecte>

同时修改newCategory里的对象结构，匹配自定义字段即可。