使用 Select 输入和 v-model 更新两个数据值

Question

我有一个简单的 Select 输入，使用 v-model 绑定到数据属性 (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> 标记中，然后该方法将更新第二个数据属性。

但这仅适用于 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