element中form组件prop嵌套属性的问题解决
作者:VELOMA 发布时间:2023-07-02 16:49:18
Introduction
分享今天同事问的一个问题, 下面这段代码会报错,先看代码:重点是el-form-item组件的prop属性
<template>
<div id="app">
<el-form label-width="100px" :model="ruleForm" :rules="rules">
<el-form-item
v-for="(item, index) in tableData"
:key="item.id"
:prop="'tableData.' + index + '.name'"
:rules="rules.name"
>
<el-input v-model="item.name"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
ruleForm: {
name: ''
},
tableData: [
{ id: 1, name: "" },
{ id: 2, name: "" },
],
rules: {
name: [
{
required: true,
message: "请输入活动名称",
trigger: "blur",
validator(rule, value, callback) {
console.log("rule: ", rule);
console.log("value: ", value);
},
},
],
},
};
},
};
</script>
我第一眼看上去的时候并没有发现什么问题,但这段代码实实在在的报错了,我们来看一下错误
首先需要明确的是 这是一个警告, 并非一个error, 但他直接导致了我们的代码执行结果非预期,我们来分析一下这个错误
1.首先这个错误的第一句**Error in mounted hook**, 错误发生在mounted钩子中
2.请安排一个有效的path给prop
首先第一个问题,我的代码中并没有mounted函数,他怎么会报错呢?
第二个问题,让我们提供一个有效的prop, 但这里我们明明给的是有效的撒。
最后查了官网并查了百度 都没有找到很好的解决方式,最后没有办法,只能去看一下element-ui的源码, 下面是源码环节:
1.找到packages/form/src/form-item.vue这个文件
2. 我们根据他的报错来分析, 首先他说`mounted hook`中报错, 那我们就直接来看这个hook做了什么事情:
mounted() {
if (this.prop) {
this.dispatch('ElForm', 'el.form.addField', [this]); // 这一步不用管
let initialValue = this.fieldValue; // 取得fieldvalue
// 判断fieldvalue是不是数组, 如果是数组则合并
if (Array.isArray(initialValue)) {
initialValue = [].concat(initialValue);
}
// 给this定义一个initialValue属性
Object.defineProperty(this, 'initialValue', {
value: initialValue
});
this.addValidateEvents();
}
}
我看这段代码的第一反应是, 这也没干什么事儿啊, 就取了个值 赋了个值, 看了一会儿我发现, 有一个盲点就是this.fieldValue
这里, 这是一个什么东西呢?不知道 去看一下。
computed: {
fieldValue() {
// 1.拿到当前"form"的model属性(这里很重要, 要记住这一步)
const model = this.form.model;
if (!model || !this.prop) { return; }
// 2.拿到当前"form-item"的prop属性,
// 也就是我们传的那个:prop="'tableData.' + index + '.name'"
let path = this.prop;
if (path.indexOf(':') !== -1) {
path = path.replace(/:/, '.');
}
// 3.将model和path传给了getPropByPath方法
return getPropByPath(model, path, true).v;
}
}
代码翻到fieldValue
这里, 发现这是一个computed
属性(步骤见注释), 发现最终返回getPropByPath
方法的返回结果, 我们接着去看一下这个方法.
我们发现这个方法是在utils/util
下的一个方法
第一眼看到这个方法, 是不是有一种眼熟的感觉?越看越像js的一个面试题
function getValue(obj, path) {
...
}
const obj = { a: { b: { c: '1' } } }
getValue(obj, 'a.b.c'); // 1
有木有啊! 有木有!不能说一模一样,只能说分毫不差,既然知道它是面试题就简单了,我们首先需要明确 这个方法的作用就是 通过嵌套字符串key 拿到key对应的value, 那我们来看一下element是怎么做的。
首先先看第一句代码let tempObj = obj
, 这里第一次的obj是谁呢?是不是上面传过来的this.form.model
啊? 我们来看一下 我们代码中传输的model是什么
我们这里只需要记住, 我们传的是一个对象{ name: '' }
好的 我们再来看下一步, path = 正则匹配
, 最后的结果是keyArr = ['tableData', 0, 'name']
下面的代码就是走keyArr的循环了, 这里我们是3次循环, 因为keyArr只有三个元素
我们还是来捋一下:
1. 第一次循环, 此时的tempObj是 { name: '' }, key是tableData, key in tempObj?, 很显然是false, 所以直接走了else, 触发了throw new Error
其实看到这里我们就明白了, element在做prop
判断的时候, 是通过判断key
在不在model
中的方式 来判断path
是否合法的, 那我们知道这个原理之后, 只需要将我们的代码稍稍改动一下即可。
我们只需要将tableData
移到ruleForm
中即可, 然后我们再来看控制台已经不报错了。
来源:https://juejin.cn/post/7077933193160032287
猜你喜欢
- 目前,在使用python处理一个nc文件绘制一个风场图时,出现了以下报错虽然图片画出来了,但是很丑而且没有理想的填充颜色!但是不知道为啥,但
- python map函数map()函数map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依
- 如果要在应用程序中周期性地进行某项操作,比如周期性地检测主机的CPU值,则需要用到QTimer定时器,QTimer类提供了重复的和单次的定时
- pandas 将字符串映射为数字在有些数据集中,有些数据变量用字符串表示,但为了方便处理,往往想转换为好处理的格式,这时候不一定要用one
- 一、实验目的(1)熟练使用Counter类进行统计(2)掌握pandas中的cut方法进行分类(3)掌握matplotlib第三方库,能熟练
- 1,创建测试表CREATE TABLE `testsign` ( `userid` int(5) DEFAULT NULL, `user
- 说明本文根据https://github.com/liuchengxu/blockchain-tutorial的内容,用python实现的,
- 我们用pyinstaller把朋友文件打包成exe文件,但有时候我们需要还原,我们可以用pyinstxtractor.py用法:python
- 前提:因为本文主要围绕着在thinkPHP5中使用redis的,所以关于redis的安装就不特意说明了,不过在这稍微提醒一下,安装完redi
- 项目中需要从Windows系统传输ISO文件到Linux测试系统,然后再Linux测试系统里安装这个ISO文件。所以就需要实现如何把文件从W
- ScrapyScrapy是一个比较好用的Python爬虫框架,你只需要编写几个组件就可以实现网页数据的爬取。但是当我们要爬取的页面非常多的时
- 一、环境配置需要 pillow 和 pytesseract 这两个库,pip install 安装就好了。install pillow -i
- Keepalived由于在生产环境使用了mysqlcluster,需要实现高可用负载均衡,这里提供了keepalived+hap
- 前端实现用ligerUI实现分页,感觉用框架确实简单,闲着无聊,模拟着liger的分页界面实现了一遍(只要是功能,样式什么无视)
- 在网站开发过程中,经常会遇到这样的需求:用户登陆系统才可以访问某些页面,如果用户没有登陆而直接访问就会跳转到登陆界面。要实现这样的需求其实很
- 本文实例讲述了Python实现的排列组合计算操作。分享给大家供大家参考,具体如下:1. 调用 scipy 计算排列组合的具体数值>&g
- 正如你现在所看到的一样,网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要,但只有当网页布局和网页内容成功接合
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 8 - Input Filtering Part
- Pytest-sugar是一款用来改善控制台显示的插件,增加了进度条显示,使得在用例执行过程中可以看到进度条,而且进度条是根据用例是否通过标
- numpy.nan的数据类型是float类型import numpy as nptype(np.nan) # float任何数字和numpy