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

Question

In Vue2 I got an array of objects

OptionsArr

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

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

data item

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

How could I save both name and price to item when select an option? For example, when I choose the option apple, the item should be

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

I tried to use :value.sync instead of v-model but failed.

Answer 1

change v-model of el-select to item

change :value of el-option to option

and add prop value-key to el-select too(like name if your item.name is unique)