使用Ember Power Select设置对象属性查询参数遇格式异常

看起来你遇到的问题是Power Select选中选项后，把整个对象当成了conID的值，导致URL里出现了%5Bobject%20Object%5D（这是[object Object]的URL编码结果）。问题出在你没有正确提取选项的id属性，而是直接把选中的对象赋值给了查询参数。下面是具体的修复方案：

1. 修正Power Select的绑定逻辑 #

首先，selected="id"这个写法不符合Power Select的使用规范，selected属性需要绑定到组件内的一个变量，用来存储整个选中的选项对象。修改模板代码如下：

{{#power-select
  placeholder="Select a Consultant"
  searchPlaceholder="Select a Consultant"
  selected=selectedConsultant  // 绑定到组件内的变量
  searchField="name"
  options=selectData
  onchange=(action "handleConsultantSelect")  // 绑定自定义处理动作
}}
  {{option.name}}  // 自定义下拉选项的显示内容
{{/power-select}}

2. 编写选中事件的处理函数 #

在组件的JavaScript代码中，添加handleConsultantSelect动作，专门提取选中选项的id属性，再更新查询参数：

// 组件对应的JS文件
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject } from '@ember/service';

export default class ConsultantSelectComponent extends Component {
  @inject router; // 注入路由服务，用于规范更新查询参数

  selectedConsultant = null; // 初始化选中项变量

  @action
  handleConsultantSelect(selectedOption) {
    this.selectedConsultant = selectedOption;
    // 确保提取到选项的id属性，做个空值判断避免报错
    const conID = selectedOption?.id;
    if (!conID) return;

    // 推荐方式：通过路由更新查询参数（符合Ember路由规范）
    this.router.transitionTo(this.router.currentRouteName, {
      queryParams: { conID }
    });

    // 备选方式：手动修改URL（仅适用于特殊场景，不推荐）
    // const newUrl = `${window.location.pathname}?conID=${conID}`;
    // window.history.pushState({}, '', newUrl);
  }
}

问题根源说明 #

你之前的代码应该是直接把onchange返回的整个选项对象赋值给了conID，而JavaScript在将对象转为字符串时，默认会输出[object Object]，经过URL编码后就变成了%5Bobject%20Object%5D。通过上面的修改，我们明确提取了选项的id属性作为查询参数的值，就能得到正确的?conID=xxx格式了。

最后别忘了检查selectData数组里的每个选项是否确实包含id属性，这是正确提取值的前提哦！

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