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属性。尝试访问name上的product.carrier属性时遇到错误。我不确定这是否不可能，或者我是否以错误的方式进行操作。

我真正需要的是从{{1}到<select>的{{1}}，但也使用v-model属性来触发UI更改，因为我不想使用可以通过“自定义”选项中的ID来实现。

我在product.carrier_id属性嵌套在数据对象中有name。如果没有在数据对象上预定义product和carrier_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中使用对象作为选择选项值？

1 个答案: