时间戳

首页 > 解决方案 > 下拉选项在 vuejs 中没有正确选择

javascript - 下拉选项在 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"}

由于不同标签的响应具有相同的值，因此在选择选项时会出现故障。当我选择“芒果”时，它会自动选择具有相同值的第一个字段。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>

标签： javascripthtmlcssvue.jsvue-directives

解决方案

由于您的一些项目具有相同的值，因此将选择列表中的第一个项目。

您可以做的是将整个对象设置为值：:value="facility"

然后，如果您只需要所选项目的值，请从selected属性中获取它，即您的模型：在模板中：{{ selected.value }}在脚本中：this.selected.value

推荐阅读