如何使用来自 api 的数据预填充表单并使用 Element UI Vue 验证表单

Question

所以我有一个从 api 获得的数据，

{
"companyName": "Niche",
}

我希望他们填写表单并在提交数据之前使用 element-ui el-form 组件进行验证。这是表格：

模板：

<el-form ref="form" :model="form" :rules="formRules">
 <el-form-item :prop="companyName">
    <el-input :value="response.companyName" :placeholder="response.companyName" class="input-company-name"></el-input>
 </el-form-item>
</el-form>

脚本：

data() {

 return {
  form: {
   companyName: '',
  },
  formRules: {
    companyName: [{
      required: true,
      message: 'Please input Company Name',
      trigger: 'blur',
    }],
  }
 },
 methods: {
  submitForm(form){
   this.$refs[form].validate((valid)=> {
    // perform http request
  })
 }

我试过了

<el-form-item :prop="'response.' + index + '.companyName'">
 <el-input :value="response.companyName" :placeholder="response.companyName" class="input-company-name"></el-input>
</el-form-item>

但是要么我无法获取数据来填写表格，要么验证不起作用。谁能告诉我如何解决这个问题？

Answer 1

只有在表单域被触摸时才会执行验证。除非您手动执行验证 => this.$refs[form].validate((valid)=>

所以可能在加载表单时您应该执行验证

以及执行时

this.$refs[form].validate((valid)=> {
   if (valid) {
     ... exexcute http request
   } else {
      return false;
   }
}