javascript - 使用 Ember Power Select 设置对象属性的查询参数

Question

我正在尝试使用 Power Select 创建一个下拉菜单，当选择一个选项时，它会创建该选项属性的查询参数。

我的大部分下拉框都在工作，但是当我设置“conID”查询参数时，无论我尝试什么，它都会将参数创建为 ?conID=%5Bobject%20Object%5D。

这是当前的下拉菜单:

          {{#power-select
  placeholder="Select a Consultant"
  searchPlaceholder="Select a Consultant"
  selected="id"
  searchField="name"
  options=selectData
  onchange=(action (mut conID))
  as |selectData|
}}
  {{selectData.name}}
{{/power-select}}

选项加载正确。我尝试了“选定”值的几种变体，包括

selected=selected
selected=selectData.id
selected="id"

没有成功。 selectData 中的对象具有以下结构:

selectData [ {name: 'string', value: number}]

请注意，我可以使用 native 选择框创建此功能，如下所示:

  <select class="form-control" onchange={{action (mut coc) value="target.value"}}>
            <option value="">- Select an Optionn -</option>
          {{#each option as |option|}}
          <option value="{{option.id}}">{{option.name}}</option>
          {{/each}}
          </select>

Answer 1

您应该自己处理 power-select 的更新事件，以从所选 power-select 元素的 JSON 对象中获取 id。你的 template.hbs 应该是这样的:

{{#power-select
  placeholder="Select a Consultant"
  searchPlaceholder="Select a Consultant"
  selected=selected
  searchField="name"
  options=selectData
  onchange=(action 'handleUpdate')
  as |selectData|
}}
  {{selectData.name}}
{{/power-select}}

和相应的 component.js 应该是这样的:

actions:{
    handleUpdate(val){
        this.set('selectedElement', val);
        if(val && val.id){
            this.set('conID', val.id);
        }
        else{
            this.set('conID', undefined);
        }
    }
}