Vue + Element UI: (el-select) select 一个对象选项并传值给多个属性

Question

在 Vue2 中我得到了一个对象数组

OptionsArr

[
 {
  name: "apple" ,
  price: 200
 },
 {
  name: "orange" ,
  price: 150
 }
]

和一个 el-select:

<el-select
   v-model="item.name"
 >
   <el-option
     v-for="(option,index) in OptionsArr"
     :key="index"
     :label="option.name"
     :value="option.name"
   >
    {{option.name}}
   </el-option>

数据项目

{
 name:"",
 price:undefined,
 count:2
}

当 select 一个选项时，如何将名称和价格都保存到项目中？例如，当我选择苹果选项时，项目应该是

{
 name:"apple",
 price:200,
 count:2
}

我尝试使用 :value.sync 而不是 v-model 但失败了。

Answer 1

将 v-model 的 el-select 更改为 item

将 :value of el-option 更改为 option

并将属性 value-key 添加到 el-select 中（如 name 如果你的 item.name 是独一无二的）

Vue + Element UI: (el-select) select 一个对象选项并传值给多个属性

Vue + Element UI: (el-select) select an object option and pass value to multiple property

vue.js

select

element-ui

Vue + Element UI: (el-select) select 一个对象选项并传值给多个 属性

Vue + Element UI: (el-select) select an object option and pass value to multiple property

vue.js

select

element-ui

Vue + Element UI: (el-select) select 一个对象选项并传值给多个属性