使用 Ember 幂 Select 设置对象属性的查询参数

Question

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

我的大部分下拉框都在工作，但是当我设置 '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
selected=selectData.id
selected="id"

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

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

请注意，我可以使用本机 select 框创建此功能，如下所示：

  <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 的更新事件，以从 selected 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);
        }
    }
}

使用 Ember 幂 Select 设置对象属性的查询参数

Using Ember Power Select to set query param of object property

javascript

ember.js

ember-power-select

使用 Ember 幂 Select 设置对象 属性 的查询参数

Using Ember Power Select to set query param of object property

javascript

ember.js

ember-power-select

使用 Ember 幂 Select 设置对象属性的查询参数