使用 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>上触发点击事件。 此外，它感觉像是一种奇怪/hacky 的方式来做到这一点。

为了清楚起见，我的问题是：当用户单击一个选项时，如何更新两个数据属性？

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

提前致谢！

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