表单参数打印为空但是却能把参数传到后端完成访问?

I. 先说结论

不要加多余的属性啊, 把没用到的prop删掉就好了. (对我这个情况来说是这样,但也可能只是治标不治本)

可能可以参考这个vue中props传值给data时-props有值但data却是空的问题_vue2 props this.后数据总是显示空-CSDN博客https://blog.csdn.net/weixin_42490398/article/details/103033533#:~:text=%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95,%E7%AE%80%E5%8D%95%E7%9A%84%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95%E5%B0%B1%E6%98%AF%E5%9C%A8%E5%AD%90%E7%BB%84%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8watch%EF%BC%8C%E7%9B%91%E5%90%AC%E5%AF%B9%E5%BA%94%E7%9A%84props%EF%BC%8C%E7%84%B6%E5%90%8E%E5%AE%9E%E6%97%B6%E6%9B%B4%E6%96%B0data%E9%87%8C%E9%9D%A2%E7%9A%84%E5%80%BC

---

II. 症状

今天在表格里面嵌套描述列表嵌套卡片嵌套表单的时候

(狗屎代码如下,因为要之前布局换行没成功所以用了两个form把输入框分开)

出现这么个问题: 打印表单发现有个数据是undefine.

但是非常离谱的,网页发起的请求里,参数一个也不缺

而且后端也完成了相应的操作返回了请求. 所以就仅仅是前端打印不出来??

于是在请求发送的门口再次打印了一次

结果同上, undefined

---

III. 解决方式

唉我也不是前端来的, 那只好 谁有毛病就干谁了. 一开始推测是结构的问题, 嵌套的太多乱套了. 鉴于上面两个参数能显示,所以将显示不出来的参数和另两位丢一起 

结果事情离谱起来了,谁都不显示了

虽然把, 也不是不能跑,  后端都在正常跑, 但是吧.....至少不应该丢在这里不管. 所以此处省略发癫的5个小时.......

再发癫的过程中,通过给整个表单代码套上一个div, 成功让参数又能打印出来了

额.. 好吧. 看起来问题是解决了? 那就把剩下的这行空壳表单删了吧

噔噔咚~噔噔噔咚!

然而删了后发现,数据又不能打印出来了

搞啥呀....明明绑定的都是同一个对象. v-model肯定不会有问题,  是不是refs 同名冲突了啊. 上面表单传参, 下面表单挂名? 搞啥呀, 被个代码绑架了不成?

于是开始注意$refs 这个参数, 看看到底从谁身上取得.  

当然是从form保单上取得 ! (废话不是)

两个都是form.... 于是把ref往上提了一级到div里去然后再删掉多的这个表单

于是...就能成功获取到参数了, 不过还夹杂着一堆别的报错....

那看来问题是多个refs同级冲突咯?

Vue 中的 ref 属性详解_类型“ref<{ name: string; names: string; email: strin-CSDN博客https://blog.csdn.net/weixin_38981993/article/details/82944629总之先把代码改了吧,把ref属性放回去试试

果不其然参数又没了

---

IV. 转折

然而这个时候注意到了prop属性, 诶?这个是在这里用的吗? 记不起来这是什么时候从哪里粘过来做什么的了. 发现好像没用.于是删掉试试.........然后问题就这么给解决了

于是把代码恢复成最初的版本,但删掉 prop属性, 发现也能正常显示..............额好吧.

元凶就是 prop

所以这个问题只要模糊的描述成 "prop导致对象属性为空" 就可以找到大把大把的相关答案参考, 但是.找到答案之前我怎么能描述的出来啊