'Dynamic form validation Element-ui

This is the docs where it explains it but I can't get mine to work correctly, I get this error twice for each time I try to do it.

Error in v-on handler: "Error: please transfer a valid prop path to form item!"

When I search this error I only see some github issues but haven't been able to find a solution.

This is the code I have right now

<div v-for="(option, index) in second.tabs" :key="index">
    <el-form-item :prop="'tabs.' + index + '.title'"
            :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
        <el-input v-model="option.title"></el-input>
    </el-form-item>

    <div v-for="(square, index) in option.squares" :key="square.key">
        <el-form-item :key="square.key" :prop="'squares.' + index + '.title'"
                :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
            <el-input v-model="square.title"></el-input>
        </el-form-item>
        <el-form-item :key="square.key" :prop="'squares.' + index + '.icon'"
                :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
            <el-input v-model="square.icon"></el-input>
        </el-form-item>
    </div>                                
</div>

How can I fix this so it works correctly?

vue.jselement-ui


Solution 1:[1]

This is the solution

<div v-for="(option, index) in second.tabs" :key="index">
    <el-form-item :prop="'tabs.' + index + '.title'"
            :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
        <el-input v-model="option.title"></el-input>
    </el-form-item>

    <div v-for="(square, ind) in option.squares" :key="square.key">
        <el-form-item :key="square.key" :prop="'tabs.' + index +'.squares.' + ind + '.title'" 
            :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
            <el-input v-model="square.title"></el-input>
        </el-form-item>
        <el-form-item :key="square.key" :prop="'tabs.' + index +'.squares.' + ind + '.icon'" 
            :rules="{required: true, message: 'This is required.', trigger: 'blur'}">
            <el-input v-model="square.icon"></el-input>
        </el-form-item>
    </div>                                
</div>

The first prop was correct but I guess it wasn't working cause of the cache, I erased it and typed it out and then it worked.

Solution 2:[2]

This is for posterity in case someone can't undestand what the answer was.

You need to check the entire tree of the form, the entire path from the root of the form to the field you need to validate.

for example:

"addresses": [
    {
      "name": "",
      "city": "",
      "address": "",
      "phone": "",
      "hasExtendedQuestions": true,
      "extendedQuestions": [
        {
          "name": "",
          "type": "text"
        }
      ]
    }
  ]

There are two arrays, addresses is an array itself and is has extendedQuestions, if we try to validate the dynamic fields for the latest we type:

:prop="`addresses[${addresses_curr_idx}].extendedQuestions[${ext_questions_curr_idx}].type`"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nancy
Solution 2 H3lltronik

Related Questions