Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to solve the problem of prop nesting properties of form components in element". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Introduction

To share a question asked by my colleague today, the following code will report an error. Look at the code first: the key point is the prop property of the el-form-item component.

Export default {name: "App", data () {return {ruleForm: {name:''}, tableData: [{id: 1, name: ""}, {id: 2, name: ""},], rules: {name: [{required: true Message: "Please enter the event name", trigger: "blur", validator (rule, value, callback) {console.log ("rule:", rule) Console.log ("value:", value);},},],},};},}

I didn't see anything wrong at first glance, but this code actually reported an error. Let's take a look at the error.

First of all, we need to make it clear that this is a warning, not an error, but it directly leads to unexpected results in our code execution. Let's analyze this error.

1. First of all, the first sentence of this error * * Error in mounted hook**, error occurs in the mounted hook.

two。 Please arrange a valid path for prop

First of all, the first question is that there is no mounted function in my code. How can he report an error?

The second question, let's provide an effective prop, but here we clearly give an effective Sasa.

Finally, I checked the official website and Baidu did not find a good solution. In the end, I had no choice but to take a look at the source code of element-ui. Here is the source code link:

1. Find the file packages/form/src/form-item.vue

two。 Let's analyze it according to his error report. First of all, he said that an error was reported in `mounted hook`, so let's directly look at what this hook has done:

Mounted () {if (this.prop) {this.dispatch ('ElForm',' el.form.addField', [this]); / / never mind that let initialValue = this.fieldValue; / / get fieldvalue / / determine whether fieldvalue is an array, and merge if (Array.isArray (initialValue)) {initialValue = [] .concat (initialValue) if it is an array } / / define an initialValue attribute for this Object.defineProperty (this, 'initialValue', {value: initialValue}); this.addValidateEvents ();}}

My first reaction to this code was that it didn't do anything, so I took a value and assigned a value. After looking at it for a while, I found that there is a blind spot here in this.fieldValue. What is this? I don't know. Check it out.

Computed: {fieldValue () {/ / 1. Get the model attribute of the current "form" (it's important here, remember this step) const model = this.form.model; if (! model | |! this.prop) {return;} / / 2. Get the prop attribute of the current "form-item", / / the one we passed: prop= "'tableData.' + index +'. Name'" let path = this.prop; if (path.indexOf (':')! =-1) {path = path.replace (/: /,'.');} / / 3. Model and path are passed to the getPropByPath method return getPropByPath (model, path, true) .v;}}

The code turns to fieldValue and finds that this is a computed property (see comments for the steps) and finally returns the result of the getPropByPath method. Let's take a look at this method.

We found that this method is a method under utils/util.

Do you feel familiar at first sight of this method? The more it looks, the more it looks like an interview question of js.

Function getValue (obj, path) {...} const obj = {a: {b: {c:'1'} getValue (obj, 'a.b.c'); / / 1

Are there any?! Yes or no! Can not be exactly the same, can only be said to be exactly the same, since it is easy to know that it is an interview question, we first need to make it clear that the function of this method is to get the corresponding value of key through nested string key, then let's take a look at how element does it.

First, look at the first sentence of code let tempObj = obj. Who is the first obj here? Is it the this.form.model coming from above? Let's take a look at what model is transmitted in our code.

We just need to remember here that we are passing an object {name:''} OK, let's look at the next step, path = regular match, and the end result is keyArr = ['tableData', 0,' name']. The code below is a loop of keyArr, where we have three loops, because keyArr has only three elements.

Let's get this straight:

1. In the first loop, the tempObj is {name:'}, key is tableData, and key in tempObj?, is obviously false, so it goes directly to else and triggers throw new Error.

In fact, when we see here, we understand that when element makes prop judgment, he judges whether key is legal by judging whether path is in model or not, then we only need to change our code slightly after we know this principle.

We just need to move the tableData to the ruleForm, and then we can see that the console has not reported an error.

This is the end of the content of "how to solve the problem of prop nested properties of form components in element". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.