如何在 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 更改，因为我没有不想使用 'Custom' 选项中的 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'"> ...

如何在 Vue.js 中使用对象作为选择选项值？

How to Work with Objects as Selection Option Values in Vue.js?

javascript

html-select

vue.js