Solution to default parameter passing and custom parameter passing of element UI component
The following code
<div v-for="(item,index) in object.cooperationDepartmentNumber"> <div class="entrustingPartyList"> <el-row> <el-col :span="12"> <el-form-item label="Co Organizer"> <el-autocomplete class="inline-input" v-model="object.cooperationDepartment.otherArray[index].unit" :fetch-suggestions="unitQuerySearch" placeholder="Please enter co Organizer" :trigger-on-focus="false" @select="unitHandleSelect" ></el-autocomplete> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="Co operative Department" v-show="interior"> <el-input v-model="object.cooperationDepartment.otherArray[index].cooperation" placeholder="Co operative Department"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="Contact person of CO Organizer" v-show="external"> <el-input v-model="object.cooperationDepartment.otherArray[index].cooperation" placeholder="Co operative Department"></el-input> </el-form-item> </el-col> </el-row> </div> </div>
When we have many same components in v-for, we need to know which component is selected. Then we definitely want to know the corresponding [index], and you will think that [item] is the default value
<el-col :span="12"> <el-form-item label="Co Organizer"> <el-autocomplete class="inline-input" v-model="object.cooperationDepartment.otherArray[index].unit" :fetch-suggestions="unitQuerySearch" placeholder="Please enter co Organizer" :trigger-on-focus="false" @select="unitHandleSelect(item, index)" ></el-autocomplete> </el-form-item> </el-col>
The solution is to write a closure so that the index represents your first few components
<el-col :span="12"> <el-form-item label="Co Organizer"> <el-autocomplete class="inline-input" v-model="object.cooperationDepartment.otherArray[index].unit" :fetch-suggestions="unitQuerySearch" placeholder="Please enter co Organizer" :trigger-on-focus="false" @select="((item)=>{unitHandleSelect(item, index)})" ></el-autocomplete> </el-form-item> </el-col>
In this way, when you call this method, you can know that it corresponds to the first component, and then you can operate on that component.