Как получить предварительно заполненные формы с данными из API и проверить формы с помощью Element UI Vue

Question

Итак, у меня есть данные, которые я получил от API,

{
"companyName": "Niche",
}

, и я хочу, чтобы они заполнили форму и прошли валидацию, используя элемент el-form элемента element-ui перед отправкой данных. И это форма:

шаблон:

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