[Vue warn]: Error in mounted hook: “Error: please transfer a valid prop path to form item“ 解决办法

问题产生

在写项目的时候遇到了一些问题，虽然对项目影响不大，但是一个报红看起来不爽，所以就看一下怎么解决，报如下的错误

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

中文：
[Vue 警告]：挂载钩子错误：“错误：请传递有效的道具路径以形成项目！”

问题产生原因

在中文翻译我们可以很清楚的知道，挂载钩子错误，即 prop 的值出错了

解决办法

修改:prop="'domains.' + index + '.value'" 为 :prop="domain.fieldName"即可

<a-form-model-item
  v-for="(domain, index) in model.configDetails"
  :key="index"
  :label="index === 0 ? '添加字段' : ''"
  :prop="'domains.' + index + '.value'"
  :rules="{
    required: true,
    message: '不能为空！',
    trigger: 'blur',
  }"
>
  <a-input v-model="domain.fieldName" placeholder="输入字段名称" style="width: 40%; margin-right: 8px" />
  ~
  <a-input v-model="domain.fieldValue" placeholder="输入字段值" style="width: 40%; margin-right: 8px" />
  <a-button v-if="model.configDetails.length >= 1" @click="removeDomain(domain)">删除</a-button>
</a-form-model-item>

修改后

<a-form-model-item
  v-for="(domain, index) in model.configDetails"
  :key="index"
  :label="index === 0 ? '添加字段' : ''"
  :prop="domain.fieldName"
  :rules="{
    required: true,
    message: '不能为空！',
    trigger: 'blur',
  }"
>
  <a-input v-model="domain.fieldName" placeholder="输入字段名称" style="width: 40%; margin-right: 8px" />
  ~
  <a-input v-model="domain.fieldValue" placeholder="输入字段值" style="width: 40%; margin-right: 8px" />
  <a-button v-if="model.configDetails.length >= 1" @click="removeDomain(domain)">删除</a-button>
</a-form-model-item>

扩展

当表单进行验证时候，prop指定需要校验的属性必须是表单model属性中对应的对象的属性名称