Problem generation

I encountered some problems when writing the project. Although it has little impact on the project, a red report looks uncomfortable, so I’ll see how to solve it and report the following errors

[Vue warn]: Error in mounted hook: “Error: please transfer a valid prop path to form item!”

English:
[Vue warning]: mounting hook error: “error: please pass a valid prop path to form an item!”

Causes of problems

In the Chinese translation, we can clearly know that there is an error in the mounting hook, that is, the value of prop is wrong

Solution:

Modify :prop = "'domains.'+ index +'.value '" to :prop = "domain.fieldname"

<a-form-model-item
  v-for="(domain, index) in model.configDetails"
  :key="index"
  :label="index === 0 ?'Add field' : ''"
  :prop="'domains.' + index + '.value'"
  :rules="{
    required: true,
    message: 'Can not be empty!',
    trigger: 'blur',
  }"
>
  <a-input v-model="domain.fieldName" placeholder="Enter field name" style="width: 40%; margin-right: 8px" />
  ~
  <a-input v-model="domain.fieldValue" placeholder="Enter field value" style="width: 40%; margin-right: 8px" />
  <a-button v-if="model.configDetails.length >= 1" @click="removeDomain(domain)">删除</a-button>
</a-form-model-item>

After modification

<a-form-model-item
  v-for="(domain, index) in model.configDetails"
  :key="index"
  :label="index === 0 ?'Add field' : ''"
  :prop="domain.fieldName"
  :rules="{
    required: true,
    message: 'Can not be empty!',
    trigger: 'blur',
  }"
>
  <a-input v-model="domain.fieldName" placeholder="Enter field name" style="width: 40%; margin-right: 8px" />
  ~
  <a-input v-model="domain.fieldValue" placeholder="Enter field value" style="width: 40%; margin-right: 8px" />
  <a-button v-if="model.configDetails.length >= 1" @click="removeDomain(domain)">删除</a-button>
</a-form-model-item>

Expand

When the form is verified, prop specifies that the attribute to be verified must be the attribute name of the corresponding object in the form model attribute