javascriptember.jsember-power-select

Using Ember Power Select to set query param of object property


I am trying to use Power Select to create a drop down menu that, when an option is selected creates a query param of property of that option.

I have most of the drop down box working but when I set the 'conID' query param, no matter what I try it creates the Param as ?conID=%5Bobject%20Object%5D.

Here is the current drop down menu:

          {{#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}}

The options load correctly. I have tried a few variations of the 'selected' value including

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

With no success. The objects within selectData have the following structure:

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

Note that I can create this functionality with native select boxes as follows:

  <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>

Solution

  • You should handle update event of power-select yourself to get id from the JSON object of selected power-select element. Your template.hbs should be like:

    {{#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}}
    

    and corresponding component.js should be like:

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