下拉选项在 vuejs 中没有正确选择
dropdown options are not selecting properly in vuejs
我有一个下拉菜单,其中的选项是根据 API 响应填充的。响应如下所示
{"value":"1371","label":"apple"},{"value":"1371","label":"banana"},{"value":"1371","label":"mango "},{"value":"1365","label":"airconditioner"},{"value":"1365","label":"refridgerator"},{"value":"1365","label":"mobile"}
由于不同标签的响应具有相同的值,当select输入选项时会出现故障。当我 select “芒果”时,它会自动进入 select 第一个具有相同值的字段。 vuejs 有解决办法吗
<select v-model="selected" class="selected-lists" size="8">
<option v-for="facility in availableList" v-bind:value="facility.value">{{facility.label }}</option>
</select>
您的三件商品具有相同的价值 1371
。
它将始终 select 列表中具有 selected 值的第一项。
值应该是唯一的。
由于您的一些项目具有相同的价值,因此将选择列表中的第一项。
您可以将整个对象设置为值::value="facility"
然后,如果您只需要所选项目的值,请从 selected
属性 中获取它,这是您的模型:在模板中:{{ selected.value }}
,在脚本中: this.selected.value
我有一个下拉菜单,其中的选项是根据 API 响应填充的。响应如下所示
{"value":"1371","label":"apple"},{"value":"1371","label":"banana"},{"value":"1371","label":"mango "},{"value":"1365","label":"airconditioner"},{"value":"1365","label":"refridgerator"},{"value":"1365","label":"mobile"}
由于不同标签的响应具有相同的值,当select输入选项时会出现故障。当我 select “芒果”时,它会自动进入 select 第一个具有相同值的字段。 vuejs 有解决办法吗
<select v-model="selected" class="selected-lists" size="8">
<option v-for="facility in availableList" v-bind:value="facility.value">{{facility.label }}</option>
</select>
您的三件商品具有相同的价值 1371
。
它将始终 select 列表中具有 selected 值的第一项。
值应该是唯一的。
由于您的一些项目具有相同的价值,因此将选择列表中的第一项。
您可以将整个对象设置为值::value="facility"
然后,如果您只需要所选项目的值,请从 selected
属性 中获取它,这是您的模型:在模板中:{{ selected.value }}
,在脚本中: this.selected.value