以下解决方案

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>

以下是working twiddle

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>

working twiddle

不能在{{#each}}块中使用`ember-power-select`

2 个答案:

以下解决方案