Как работать с объектами в качестве значений параметров выбора в Vue.js?

Question

Есть ли способ передать объект как значение <select> <option> и затем получить доступ к атрибутам этого объекта?

Я пытаюсь сделать что-то вроде этого ...

<div>
  <select v-model="product.carrier" class="custom-select">
    <option v-bind:value="{id: carrier.id, name: carrier.name}" v-for="carrier in carriers">
      {{ carrier.name }}
    </option>
  </select>
</div>

<div v-if="product.carrier.name === 'Custom'">
  <input type="text" v-model="product.custom_carrier">
</div>

Я могу получить 'object' из значения опции, но не могу получить доступ к атрибутам id или name самостоятельно.Я получаю сообщение об ошибке при попытке доступа к атрибуту name на product.carrier.Я не уверен, что это просто невозможно или я поступаю неправильно.

Что мне действительно нужно, так это <select> до v-model product.carrier_id, но я также используюатрибут name для запуска изменения пользовательского интерфейса, так как я не хочу использовать идентификатор из опции 'Custom', чтобы сделать это.

У меня есть product, доступный в объекте данных с carrier_id атрибут вложен внутрь.Разве это не сработает без предварительной предварительной установки name и id для объекта данных?

Может быть, есть более простой способ добиться этого, о котором я не думаю?

Answer 1

Используйте v-model="product.carrier_id" и :value="carrier.id" и используйте вычисляемое свойство для извлечения имени.

computed: {
  carrier_name() {
    const carrier = this.carriers.find(carrier => carrier.id === this.product.carrier_id)
    return carrier ? carrier.name : ''
  }
}

.

<div v-if="carrier_name === 'Custom'"> ...