el-form-item 设置 prop 报错：please transfer a valid prop path to form item! #2327

michole · 2017-01-10T12:45:48Z

ElementUI version

1.1.1

OS/Browers version

macOS/Chrome 55

Vue version

2.1.8

Steps to reproduce

模板如下

<el-form :model="orderData">
    <el-form-item prop="passengerInfo[0].ticketNos[0].ticketNo"></el-form-item>
</el-form>

数据结构如下

orderData: {
  passengerInfo: [{
    ticketNos: [{
      ticketNo: 'fddfg'
    }]
  }]
}

What is actually happening?

Error: please transfer a valid prop path to form item!
    at getPropByPath (eval at <anonymous> (main.js:1368), <anonymous>:15518:14)
    at VueComponent.get (eval at <anonymous> (main.js:1368), <anonymous>:15591:17)
    at VueComponent.boundFn [as fieldValue] (eval at <anonymous> (main.js:650), <anonymous>:131:12)
    at VueComponent.mounted (eval at <anonymous> (main.js:1368), <anonymous>:15689:21)
    at callHook (eval at <anonymous> (main.js:650), <anonymous>:2610:19)
    at Object.insert (eval at <anonymous> (main.js:650), <anonymous>:2802:5)
    at invokeInsertHook (eval at <anonymous> (main.js:650), <anonymous>:4420:28)
    at VueComponent.patch [as __patch__] (eval at <anonymous> (main.js:650), <anonymous>:4577:5)
    at VueComponent.Vue._update (eval at <anonymous> (main.js:650), <anonymous>:2497:19)
    at VueComponent.eval (eval at <anonymous> (main.js:650), <anonymous>:2464:10)

The text was updated successfully, but these errors were encountered:

michole · 2017-01-10T12:56:53Z

补充说明，当 <el-form> 出现在父组件，嵌套引用子组件，<el-form-item>出现在子组件中时，才会出现如上问题。

gdutwyg · 2017-08-14T08:06:16Z

那怎么解决呢？我的表单<el-form-item>现在是嵌套在<el-table>里面，<el-table>又嵌套在<el-form>里面，有解决方案吗？

znyh113too · 2017-08-16T09:24:59Z

怎么解决的呢？我也遇到这个问题了

gdutwyg · 2017-08-17T01:10:47Z

https://jsfiddle.net/d3bem3br/1/

zzuligy · 2017-10-18T07:56:36Z

上面是因为 form-item.vue
里面的这个function getPropByPath (obj, path) 函数抛出的异常。
原因是el-form-item上面的填写的prop="key" 不在 el-form的 :model="obj" 里面，也就是可以不在obj里面。
书写正确即可。

well-monkey · 2018-01-22T09:24:38Z

问题解决了嘛？我还是遇到了这个问题解决不了

gdutwyg · 2018-01-22T14:39:59Z

https://jsfiddle.net/d3bem3br/1/

rustanacexd · 2018-04-21T14:26:05Z

same its happening to me :(

aliyanyi · 2018-09-28T05:31:51Z

https://blog.csdn.net/mengyue0828/article/details/56484866

SHERlocked93 · 2018-11-09T11:06:11Z

我遇到的情况原因是对el-form绑定的:model中的改变不能触发el-form-item的fieldValue更新，因此在form验证的时候会找不到已经更改后的:model内容而报错，我的处理办法是把修改后的:model用$set赋值给自己触发更新，解决了我的问题，希望对大家也有用；

caoweiju · 2018-12-06T10:15:44Z

today，i have the same problem，

<el-form :model="orderData">
    <el-form-item prop="passengerInfo[0].ticketNos[0].ticketNo"></el-form-item>
</el-form>

the problem is the attribute [prop] of el-form-item must be a string, and make sure the [prop] is a attribute of the model which you write on el-form; see form-item-attributes; 也就是说el-form-item上的属性prop字段，必须是其父级组件el-form中绑定model字段中的一个直接子属性。在这个示例中必须保证不管何时orderData.passengerInfo[0].ticketNos[0].ticketNo可以访问到，访问链路中不能出错。

prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 model 中的字段

so what should do is: make it to string, add ' => "'passengerInfo'+firstIndex+'.ticketNos'+firstIndex+'.ticketNo'"

<el-form :model="orderData">
    <el-form-item prop="'passengerInfo.'+firstIndex+'.ticketNos.'+firstIndex+'.ticketNo'""></el-form-item>
</el-form>

FangYuhan · 2019-02-12T06:30:50Z

I want to say 666

mordonez-me · 2019-05-23T19:20:45Z

Do you know if this works for two level nested? I mean, I have tried in the format they say and works ok for one level like property.0.property but with property.0.property.0.property doesn't work.

Any ideas?

gtgtkiss · 2019-06-04T09:54:42Z

today，i have the same problem，
<el-form :model="orderData">
    <el-form-item prop="passengerInfo[0].ticketNos[0].ticketNo"></el-form-item>
</el-form>
the problem is the attribute [prop] of el-form-item must be a string, and make sure the [prop] is a attribute of the model which you write on el-form; see form-item-attributes; 也就是说el-form-item上的属性prop字段，必须是其父级组件el-form中绑定model字段中的一个直接子属性。在这个示例中必须保证不管何时orderData.passengerInfo[0].ticketNos[0].ticketNo可以访问到，访问链路中不能出错。

prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 model 中的字段

so what should do is: make it to string, add ' => "'passengerInfo'+firstIndex+'.ticketNos'+firstIndex+'.ticketNo'"
<el-form :model="orderData">
    <el-form-item prop="'passengerInfo.'+firstIndex+'.ticketNos.'+firstIndex+'.ticketNo'""></el-form-item>
</el-form>

非常感谢，花了我3小时没弄懂，被你一语点破了，一定要是直接子属性

cag2050 · 2019-07-25T09:56:04Z

Do you know if this works for two level nested? I mean, I have tried in the format they say and works ok for one level like property.0.property but with property.0.property.0.property doesn't work.

Any ideas?

Have you solved this problem?

xieyezi · 2019-08-02T07:38:22Z

解决了，谢谢大佬

mitoop · 2019-09-28T16:28:25Z

today，i have the same problem，
<el-form :model="orderData">
    <el-form-item prop="passengerInfo[0].ticketNos[0].ticketNo"></el-form-item>
</el-form>
the problem is the attribute [prop] of el-form-item must be a string, and make sure the [prop] is a attribute of the model which you write on el-form; see form-item-attributes; 也就是说el-form-item上的属性prop字段，必须是其父级组件el-form中绑定model字段中的一个直接子属性。在这个示例中必须保证不管何时orderData.passengerInfo[0].ticketNos[0].ticketNo可以访问到，访问链路中不能出错。

prop | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | 传入 Form 组件的 model 中的字段

so what should do is: make it to string, add ' => "'passengerInfo'+firstIndex+'.ticketNos'+firstIndex+'.ticketNo'"
<el-form :model="orderData">
    <el-form-item prop="'passengerInfo.'+firstIndex+'.ticketNos.'+firstIndex+'.ticketNo'""></el-form-item>
</el-form>

3Q~

YoungMai · 2019-10-17T06:46:10Z

补充说明，当出现在父组件，嵌套引用子组件，出现在子组件中时，才会出现如上问题。

虽然有报错但是实际功能上好像没有影响是吗

null2014 · 2019-11-12T09:56:09Z

null2014 · 2019-11-12T09:57:00Z

<el-radio v-model.lazy="numbering" label="1" v-on:click.native.prevent="fn()">A</el-radio>
但是選中的效果沒有那麼好

Xus4 · 2020-04-05T02:03:21Z

use this like :prop="your variables exp"

reheroad · 2020-07-31T03:44:41Z

今天，我有同样的问题，
<el-form :model="orderData">
    <el-form-item prop="passengerInfo[0].ticketNos[0].ticketNo"></el-form-item>
</el-form>
问题是el-form-item的属性[prop]必须是字符串，并确保[prop]是您在el-form上编写的模型的属性；参见form-item-attributes ; 也就是说el-form-item上的属性prop字段，的英文必须级其父组件el-form中绑定model字段中的一个直接子属性。这个在示例中必须保证不管何时orderData.passengerInfo[0].ticketNos[0].ticketNo可以访问到，访问链路中不能出错。

道具| 表单域模型变量，在使用validate，resetFields方法的情况下，该属性是必填的| 字符串初步表格组件的模型中的预设

所以应该做的是：使其成为字符串，添加'=> "'passengerInfo'+firstIndex+'.ticketNos'+firstIndex+'.ticketNo'"
<el-form :model="orderData">
    <el-form-item prop="'passengerInfo.'+firstIndex+'.ticketNos.'+firstIndex+'.ticketNo'""></el-form-item>
</el-form>

Today, I have the same problem when I use the dynamic add and drop form item

reheroad · 2020-07-31T03:46:11Z

补充说明，当出现在父组件时，合并引用子组件，出现在子组件中时，才会出现如上问题。

虽然有报错但是实际功能上好像没有影响是吗

目前来说，我是这样

lbzzt · 2020-08-29T13:25:01Z

重置 please transfer a valid prop path to form item!

aotiyou · 2021-01-15T01:56:56Z

https://jsfiddle.net/d3bem3br/1/

亲测有效

Burning-Shadow · 2021-03-15T08:25:50Z

补充说明，当出现在父组件，嵌套引用子组件，出现在子组件中时，才会出现如上问题。

虽然有报错但是实际功能上好像没有影响是吗

功能上看怎么理解了，如果你confirm之前进行了validate那么就会被阻止提交

Burning-Shadow · 2021-03-15T09:14:20Z

我遇到的情况原因是对el-form绑定的:model中的改变不能触发el-form-item的fieldValue更新，因此在form验证的时候会找不到已经更改后的:model内容而报错，我的处理办法是把修改后的:model用$set赋值给自己触发更新，解决了我的问题，希望对大家也有用；

我这边是由于用户把key写为 a.b 的形式【也就是key中存在句点导致getPropByPath严格模式下解析失败，就像是脚本注入一样的黑科技】，这里放出来也算是给大家提供个思路，key值的设定可以做一层校验

YuanHuaQiang · 2021-05-11T06:21:36Z

我遇到的情况原因是对el-form绑定的:model中的改变不能触发el-form-item的fieldValue更新，因此在form验证的时候会找不到已经更改后的:model内容而报错，我的处理办法是把修改后的:model用$set赋值给自己触发更新，解决了我的问题，希望对大家也有用；

我这边是由于用户把key写为 a.b 的形式【也就是key中存在句点导致getPropByPath严格模式下解析失败，就像是脚本注入一样的黑科技】，这里放出来也算是给大家提供个思路，key值的设定可以做一层校验

老哥稳

zuokun300 · 2021-07-22T02:08:34Z

补充说明，当出现在父组件，嵌套引用子组件，出现在子组件中时，才会出现如上问题。

请问此问题解决了吗

michole changed the title ~~el-form-item 设置 prop 报错：~~ el-form-item 设置 prop 报错：please transfer a valid prop path to form item! Jan 10, 2017

michole closed this as completed Jan 10, 2017

oimou mentioned this issue Sep 14, 2018

[D3-345] multiple keys validation d3ledger/back-office#55

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

el-form-item 设置 prop 报错：please transfer a valid prop path to form item! #2327

el-form-item 设置 prop 报错：please transfer a valid prop path to form item! #2327

michole commented Jan 10, 2017

michole commented Jan 10, 2017 •

edited

Loading

gdutwyg commented Aug 14, 2017 •

edited

Loading

znyh113too commented Aug 16, 2017

gdutwyg commented Aug 17, 2017

zzuligy commented Oct 18, 2017

well-monkey commented Jan 22, 2018

gdutwyg commented Jan 22, 2018

rustanacexd commented Apr 21, 2018

aliyanyi commented Sep 28, 2018

SHERlocked93 commented Nov 9, 2018

caoweiju commented Dec 6, 2018 •

edited

Loading

FangYuhan commented Feb 12, 2019

mordonez-me commented May 23, 2019

gtgtkiss commented Jun 4, 2019

cag2050 commented Jul 25, 2019

xieyezi commented Aug 2, 2019

mitoop commented Sep 28, 2019

YoungMai commented Oct 17, 2019

null2014 commented Nov 12, 2019

null2014 commented Nov 12, 2019

Xus4 commented Apr 5, 2020

reheroad commented Jul 31, 2020

reheroad commented Jul 31, 2020

lbzzt commented Aug 29, 2020 •

edited

Loading

aotiyou commented Jan 15, 2021

Burning-Shadow commented Mar 15, 2021

Burning-Shadow commented Mar 15, 2021

YuanHuaQiang commented May 11, 2021

zuokun300 commented Jul 22, 2021

el-form-item 设置 prop 报错：please transfer a valid prop path to form item! #2327

el-form-item 设置 prop 报错：please transfer a valid prop path to form item! #2327

Comments

michole commented Jan 10, 2017

ElementUI version

OS/Browers version

Vue version

Steps to reproduce

What is actually happening?

michole commented Jan 10, 2017 • edited Loading

gdutwyg commented Aug 14, 2017 • edited Loading

znyh113too commented Aug 16, 2017

gdutwyg commented Aug 17, 2017

zzuligy commented Oct 18, 2017

well-monkey commented Jan 22, 2018

gdutwyg commented Jan 22, 2018

rustanacexd commented Apr 21, 2018

aliyanyi commented Sep 28, 2018

SHERlocked93 commented Nov 9, 2018

caoweiju commented Dec 6, 2018 • edited Loading

FangYuhan commented Feb 12, 2019

mordonez-me commented May 23, 2019

gtgtkiss commented Jun 4, 2019

cag2050 commented Jul 25, 2019

xieyezi commented Aug 2, 2019

mitoop commented Sep 28, 2019

YoungMai commented Oct 17, 2019

null2014 commented Nov 12, 2019

null2014 commented Nov 12, 2019

Xus4 commented Apr 5, 2020

reheroad commented Jul 31, 2020

reheroad commented Jul 31, 2020

lbzzt commented Aug 29, 2020 • edited Loading

aotiyou commented Jan 15, 2021

Burning-Shadow commented Mar 15, 2021

Burning-Shadow commented Mar 15, 2021

YuanHuaQiang commented May 11, 2021

zuokun300 commented Jul 22, 2021

michole commented Jan 10, 2017 •

edited

Loading

gdutwyg commented Aug 14, 2017 •

edited

Loading

caoweiju commented Dec 6, 2018 •

edited

Loading

lbzzt commented Aug 29, 2020 •

edited

Loading