vue.js 和 Element Plus - 使用 el-select 和 key

Question

我打算制作一个可以具有三个值的下拉菜单：第一个可以是“父亲”或“母亲”，具体取决于 autoGender(index) 方法返回的条件。第二个总是“父亲”。第三个永远是“妈妈”

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

我无法修改列表['性别']。在setGender方法中，如何区分下拉菜单中选定的选项？我尝试使用 event.target.key 但它不起作用。这是使用 Element Plus (https://element-plus.org/en-US/component/select.html)。

Answer 1

需要其他变量，例如 autoOrManual，可以具有以下值：“Auto”、“F”或“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'
 }
}