vue.js and Element Plus - use el-select with key

Question

I intend to make a drop-down menu that can have three values: The first can be 'Father' or 'Mother' depending on the condition returned by the autoGender(index) method. The second is always 'Father'. The third is always 'Mother'

    <el-select :value="list['gender']" @change="setGender($event)">
      <el-option :value="autoGender(index)">{{autoGender(index)}}</el-option>
     <el-option :value="'Father'">Father</el-option>
     <el-option :value="'Mother'">Mother</el-option>
    </el-select>

I can't modify the list['gender']. In the setGender method, how can I differentiate the selected option from the drop-down menu? I tried using event.target.key but it doesn't work. This is using the Element Plus (https://element-plus.org/en-US/component/select.html).

Answer 1

It is needed to other variable like autoOrManual that can have the following values: 'Auto', 'F' or 'M'.

<el-select :value="autoOrManual" @change="setGender(index, $event)">
  <el-option :label="autoGender(index)" :value="'Auto'">{{autoGender(index)}}</el-option>
 <el-option :label="'Father'" :value="'F'">Father</el-option>
 <el-option :label="'Mother'" :value="'M'">Mother</el-option>
</el-select>

setGender(index, event) {
 if(event == 'Auto') {
   this.list[index]['gender'] = autoGender(index)
 } else if (event == 'F') {
   this.list[index]['gender'] = 'Father'
 } else {
  this.list[index]['gender'] = 'Mother'
 }
}