I have a form form in a pop-up box to add content to the page. Click the cancel button to empty the contents of the form itself. Using this.$refs ["addServiceForm"] .invalid Fields () does not work. Console comes out
console.log (this.$refs ["addServiceForm"]. ResetFields ()); is actually undefined.
<el-dialog
title=""
:visible.sync="addServiceDialogVisible"
width="400px">
<div>
<el-form ref="addServiceForm">
<table class="base_table">
<tbody class="table_body1">
<tr>
<td width="15%" class="text_align_right"></td>
<td>
<el-input v-model="serviceName"></el-input>
</td>
</tr>
<tr>
<td class="text_align_right"></td>
<td>
<el-input v-model="serviceShorterName"></el-input>
</td>
</tr>
<tr>
<td class="text_align_right"></td>
<td>
<el-select v-model="serviceType" placeholder="" @change="selectChange" style="width:100%">
<el-option
v-for="item in serviceTypeOptions1"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<td class="text_align_right"></td>
<td>
<el-input type="textarea" :rows="2" v-model="serviceRemarks"></el-input>
<!--resize="none"-->
</td>
</tr>
</tbody>
</table>
</el-form>
</div>
<span slot="footer" class="dialog-footer modalCenter">
<el-button type="primary" @click="addNewService"> </el-button>
<el-button @click="cancleAddService"> </el-button>
</span>
</el-dialog>cancleAddService(){
this.resetForm("addServiceForm");
// this.serviceName="";
// this.serviceShorterName="";
// this.serviceRemarks="";
// this.serviceType="";
this.addServiceDialogVisible=false;
},
resetForm(formName) {
this.$refs[formName].resetFields();
console.log("form:"+this.$refs["addServiceForm"].resetFields());
}