Element 动态表单嵌套踩坑日记 please transfer a valid prop path to form item

置顶疯人院里的疯言风语

已于 2022-06-10 10:33:55 修改

阅读量5.7k

点赞数 6

文章标签：前端 html javascript

于 2022-02-15 11:44:55 首次发布

本文链接：https://blog.csdn.net/m0_59769246/article/details/122940301

版权

相信很多人使用动态表单，没错就在昨天我也使用了动态表单这不是第一次，在上一篇文章中我还专门出了一篇关于动态表单的文章只不过没有使用表单嵌套，一切都很顺利，但是这次使用动态表单并嵌套之后出现了我意想不到的事情，如果你还没有使用过动态表单，请点击去了解动态表单

都知道动态表单的验证是比较特殊的，都是写在el-form-item上面的如下。

  <el-form-item
          label="作业标题"
          :prop="'domains.' + index + '.jobtitle'"
          :rules="[
            {
              required: true,
              message: '标题不能为空',
              trigger: 'blur',
            },
            { min: 5, max: 200, message: '标题最少 5 个字符，最多 200 个字符', trigger: 'blur' },
          ]">
          <el-input :rows="5" v-model.trim="item.jobtitle" maxlength="200" show-word-limit placeholder="字数限制5-200，标题不可重复" class="long1" type="textarea"></el-input>
        </el-form-item>

在嵌套之还却报了一个错误 please transfer a valid prop path to form item! 这个错误是什么意思呢。译：（请传输一个有效的道具路径来形成物品！）意思是说你的 prop 的路径不对，表单嵌套代码如下

<template>
  <div class="box">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <div v-for="(item, index) in dynamicValidateForm.domains" :key="item.key" class="ietm_content">
        <el-form-item
          label="测试"
          :prop="'domains.' + index + '.jobtitle'"
          :rules="[
            {
              required: true,
              message: '标题不能为空',
              trigger: 'blur',
            },
            { min: 5, max: 200, message: '标题最少 5 个字符，最多 200 个字符', trigger: 'blur' },
          ]">
          <el-input :rows="5" v-model.trim="item.jobtitle" maxlength="200" show-word-limit placeholder="字数限制5-200，标题不可重复" class="long1" type="textarea"></el-input>
        </el-form-item>
        <!-- 正确选项 -->
        <el-form-item label="正确选项">
          <el-button style="margin-left: 10px" @click="addcorrect(item)" type="primary">添加选项</el-button>
          <span style="color: #606266; margin-left: 10px">最多共可设置 5 个</span>
        </el-form-item>
        <div v-for="(itemr, indexr) in item.correct" :key="indexr.key">
          <el-form-item
            :label="`选项${indexr + 1}`"
            :prop="itemr.+ indexr + '.options'"
            :rules="[
              {
                required: true,
                message: '选项不能为空',
                trigger: 'blur',
              }]">
            <el-input v-model.trim="itemr.options" class="long1" placeholder="请输入"clearable> 
           </el-input>
         
          </el-form-item>
        </div>
      </div>
    </el-form>
  
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dynamicValidateForm: {
        domains: [
          {
            jobtitle: '',
            correct: [
              {
                options: ''
              }
            ]
            ]
          }
        ]
      }
    }
  },
  computed: {},
  mounted () {},
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>

</style>

正常嵌套在里面的验证应该都会跟上面的代码这样写都是这样会报错的

正确代码如下：

<template>
  <div class="box">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <div v-for="(item, index) in dynamicValidateForm.domains" :key="item.key" class="ietm_content">
        <el-form-item
          label="测试"
          :prop="'domains.' + index + '.jobtitle'"
          :rules="[
            {
              required: true,
              message: '标题不能为空',
              trigger: 'blur',
            },
            { min: 5, max: 200, message: '标题最少 5 个字符，最多 200 个字符', trigger: 'blur' },
          ]">
          <el-input :rows="5" v-model.trim="item.jobtitle" maxlength="200" show-word-limit placeholder="字数限制5-200，标题不可重复" class="long1" type="textarea"></el-input>
        </el-form-item>
        <!-- 正确选项 -->
        <el-form-item label="正确选项">
          <el-button style="margin-left: 10px" @click="addcorrect(item)" type="primary">添加选项</el-button>
          <span style="color: #606266; margin-left: 10px">最多共可设置 5 个</span>
        </el-form-item>
        <div v-for="(itemr, indexr) in item.correct" :key="indexr.key">
          <el-form-item
            :label="`选项${indexr + 1}`"
            :prop="'domains.' + index + '.correct.' + indexr + '.options'"
            :rules="[
              {
                required: true,
                message: '选项不能为空',
                trigger: 'blur',
              }]">
            <el-input v-model.trim="itemr.options" class="long1" placeholder="请输入"clearable> 
           </el-input>
         
          </el-form-item>
        </div>
      </div>
    </el-form>
  
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dynamicValidateForm: {
        domains: [
          {
            jobtitle: '',
            correct: [
              {
                options: ''
              }
            ]
            ]
          }
        ]
      }
    }
  },
  computed: {},
  mounted () {},
  methods: {
    
  }
}
</script>
<style lang="scss" scoped>

</style>