Vue.js, используя v-модель для получения информации от v-for - PullRequest
Новая
       33

Vue.js, используя v-модель для получения информации от v-for

1 голос
/ 08 октября 2019

У меня есть выпадающий список в модальном, который заполнен объектами устройства. Я хочу показать пользователю только значение name каждого объекта устройства. Это делает это в настоящее время. Но когда пользователь выбирает одно из имен устройств, я хочу использовать v-модель для хранения _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), а не только имя устройства, которое выбирается пользователем?

1 Ответ

2 голосов
/ 08 октября 2019

Вам просто нужно установить атрибут value элемента option равным _id каждого объекта: 

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