分享
三行代码  ›  专栏  ›  技术社区  ›  Brian

js,使用v-model从v-for获取信息 - Vue.js, using v-model to get information from v-for

  •  1
  • Brian  · 技术社区  · 1 周前

    我在一个模式中有一个下拉框,里面填充了设备对象。我只想向用户显示 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>
    

    对于我来说,保存整个设备对象(或仅保存设备ID)而不是仅保存由用户选择的设备名称的最佳方法是什么?

    1 回复  |  直到 1 周前
        1
  •  2
  •   CMS    1 周前

    你只需要设置 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.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app"></div>