Question

我有一个简单的Select输入，使用v模型绑定到数据属性（device_id）：

<select v-model="device_id">
  <option disabled value="">Choose a device</option>
  <option v-for="device in devices" v-bind:value="device.id">
    {{ device.name }}
  </option>
</select>

当用户选择设备时，this.device_id会自动更新，这很棒！然后，我可以将其保存到数据库中。

但是...我也想保存this.device_name，为了我的生命，我不知道如何在以下情况下“绑定”或更新this.device_id和this.device_name用户单击一个选项。

我尝试将@click="updateName(device.name)"添加到我的<option>标记中，然后该方法将更新第二个data属性。

但这仅在Firefox上有效，因为其他浏览器不会在<option>上触发点击事件。除此之外，这感觉像是一种怪异的方法。

请明确说明，我的问题是：当用户单击选项时，如何更新两个数据属性？

我确信这是一种“正确”的方式，我很想听听您的想法！这似乎是一个非常简单的问题，但我似乎无法弄清楚-_-

谢谢！

Answer 1

尝试将选项值绑定到整个对象，然后使用所选对象的属性，例如：

<select v-model="selected_device">
  <option disabled value="">Choose a device</option>
  <option v-for="device in devices" v-bind:value="device">
    {{ device.name }}
  </option>
</select>

要将ID发送到您的数据库，只需使用this.selected_device.id，您也可以使用selected_device.name

使用选择输入和v模型更新两个数据值

1 个答案: