Vue.js，使用v

我在模式下有一个下拉框，其中装有设备对象。我只想向用户显示每个设备对象的name值。目前正在这样做。但是，当用户选择设备名称之一时，我想使用v-model来存储所选设备的_id，而不是名称。我想要这个，是因为如果我只有名字而不是_id，那么后端必须做更多的工作。

这里是模板：

<template>
  <card-modal :visible="visible" @ok="buttonOK(selected)" @cancel="buttonCancel" :title="app.name" transition="zoom" :okText="'Add Device'">
    <div class="block">
      <p class="subtitle is-5">Choose a device to add to the app:</p>
      <select v-model="selected">
        <option v-for="device in devices">{{ device.name }}</option>
      </select>
      <span>Device: {{ selected }}</span>
    </div>
  </card-modal>
</template>

对我来说，保存整个设备对象（或仅保存device._id）而不是仅由用户选择的设备名称的最佳方法是什么？

您只需要将value元素的option属性设置为每个对象的_id：

  <select v-model="selected">
    <option v-for="device in devices" :value="device._id">{{ device.name }}</option>
  </select>

通过分配value属性，它将使select元素将此值作为所选值。

参见示例：

new Vue({
  el: '#app',
  template: `<div>
  Selected: {{ selected }}
   <select v-model="selected">
      <option v-for="device in devices" :value="device._id">{{ device.name }}</option>
    </select>
  </div>`,
  data() {
    return {
      selected: 1,
      devices: [
        { _id: 1, name: 'Device 1' },
        { _id: 2, name: 'Device 2' },
        { _id: 3, name: 'Device 3' },
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>