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

是否有方法将对象作为

的值传递，然后访问该对象的属性

我正试着做这样的事情

<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>

{{carrier.name}

我可以从选项值中获取“object”，但似乎无法单独访问

id

或

name

属性。尝试访问

product.carrier

上的

name

属性时出错。我不确定这是不可能的，还是我走错了方向

我真正需要的是

到

v-model

的

产品。carrier\u id

但也使用

name

属性触发UI更改，因为我不想使用“Custom”选项中的id来进行更改

我在数据对象中提供了

产品

，其中嵌套了

carrier\u id

属性。如果不在数据对象上专门预定义

名称

和

id

，这是否可行

也许有一种我没有想到的更简单的方法来实现这一点？

使用

v-model=“product.carrier\u 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'"> ...