如何在 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>

我可以从选项值中获取“对象”，但似乎无法自行访问 id 或 name 属性。尝试访问product.carrier 上的name 属性时出现错误。我不确定这是不可能的，还是我的做法有误。

我真正需要的是 <select> 到 v-model product.carrier_id，但也使用 name 属性来触发 UI 更改，因为我不想使用“自定义”选项中的 ID去做吧。

我在数据对象中有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'"> ...