無法在{{#each}}塊中使用`ember-power-select`

Question

//controller
categories: ['category0', 'category1', 'category2'],
units: ['unit0', 'unit1', 'unit3'],

//hbs
<ul>
  {{#each categories as |category|}}
    <label>{{category}}</label>
    <li>
      <label>Select Unit</label>
      {{#power-select
        options=units
        selected=selected
        onchange=(action (mut selected)) 
        as |unit|
      }}
        {{unit}}
      {{/power-select}}
    </li>
  {{/each}}
</ul>

上面的代碼生成了3個電源選擇框。 當我在第一個電源選擇框中選擇一個值時，也會在第二個和第三個框中選擇相同的值。

有3個類別，因此它會加載三個電源選擇框。 所有3個電源選擇選項都具有相同的陣列（單位：['unit0'，'unit1'，'unit3']）。

如何使每個電源選擇框都與眾不同？ 這樣我就可以在每個電源選擇框中選擇一個不同的值。

Answer 1

您需要將selectedItem屬性發送到ember-power-select，當前正在發送每個塊作用域unit屬性。

我修改了您的代碼以包含selected

Units: [{name:'Unit0',selected:''},{name:'Unit1',selected:''},{name:'Unit2',selected:''}]

並在hbs中

<ul>
  {{#each Units as |unit|}}
    <li>
      <label>Select Unit</label>
      {{#power-select
        selected=unit.selected
        options=Units 
        onchange=(action (mut unit.selected)) 
        as |unit|
      }}
        {{unit.name}}
      {{/power-select}}
    </li>
  {{/each}}
</ul>

這是工作中的瑣事

Answer 2

以下解決方案有效

categories: [{label: 'category0'}, {label: 'category1'}, {label: 'category2'}
],
units: ['unit0', 'unit1', 'unit3']

<ul>
  {{#each categories as |category|}}
    <label>{{category}}</label>
    <li>
      <label>Select Unit</label>
      {{#power-select
        options=units
        selected=category.selected
        onchange=(action (mut category.selected)) 
        as |unit|
      }}
        {{unit}}
      {{/power-select}}
    </li>
  {{/each}}
</ul>

工作旋轉