1. The problem is as above, related code:
<el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-suffix="" label-width="80px" label-position="left" >
<el-row v-for="(demand, index) in dynamicValidateForm.demands">
<el-col :span="4">
<el-form-item :label="index+": "" :key="demand.key" :prop=""demands." + index + ".value1""
:rules="{required: true, message: "", trigger: "blur"}">
<el-autocomplete class="inline-input" v-model="demand.value1" :fetch-suggestions="querySearch1" placeholder="" @select="handleSelect1"></el-autocomplete>
</el-form-item>
</el-col>
<el-col :offset="1" :span="4">
<el-form-item :label=""-"" :key="demand.key" :prop=""demands." + index + ".value2""
:rules="{required: false, message: "", trigger: "blur"}">
<el-autocomplete class="inline-input" v-model="demand.value2" :fetch-suggestions="querySearch2" placeholder="" @select="handleSelect2"></el-autocomplete>
</el-form-item>
</el-col>
<el-col :offset="1" :span="1">
<el-button @click.prevent="removeDemand(demand)"></el-button>
</el-col>
</el-row>
<el-form-item>
<el-button @click="addDemand"></el-button>
<el-button @click="test"></el-button>
</el-form-item>
</el-form>
data area:
data: {
position: [
{ "value": "UI"},
{ "value": "web"},
{ "value": ""},
{ "value": "ios"},
{ "value": ""},
{ "value": ""}
],
technical: [
{ "value": "c"},
{ "value": "cPP"},
{ "value": "java"},
{ "value": "c-sharp"},
{ "value": "python"},
{ "value": "php"},
{ "value": "java script"}
],
dynamicValidateForm: {
demands: [{
value1: "",
value2: ""
}]
}
}, 2. This is an input box with selection suggestions. Manual input can be verified by required, but the selection cannot be passed. The effect is as follows:
:
how to solve this problem?
