【Vue】Cannot set reactive property on undefined,null,or primitive value:undefined

1. Background description

Technology stack: vue + element

Contents: Cannot set reactive property on undefined, null, or primitive value:undefined

As shown below:

2. The reason for the error

Translate it according to the content of the error report, that is, you cannot set a value for an attribute whose original value is undefined, null or undefined. In the vernacular, you cannot assign values ​​to fields that are undefined or null. Vue is a two-way data binding.

In general, we just can't render unknown objects.

Why does this error appear?

In my code, the page displayed in the pop-up window after clicking a certain button will call the API for data query before rendering, and render the page according to the queried content, but the data returned by the API interface is empty, and then put this An empty object is assigned to a form that already has an initialization value, and this error will occur when the form is rendered. Every time a value is entered, such an error will be reported.

The key error codes are as follows:

Other possible reasons for this error message include:

Data bound by v-model

<el-form-item label="公司名称">
<el-input v-model="form['名称']"></el-input>
</el-form-item>

Or an entire form: model bound data

<el-form :model="form" label-width="80px" v-if="usertype === 'candidate'">

The original form defined in data should be an object or a default value.

Although form is initialized as an object, it is assigned a value by the data returned by the function when it is mounted, for example: form = res.data; // If there is an error in the background, return a null value, which is equal to form = ''

3. Solutions

Just make a non-empty judgment on the data returned by the API. The following is the correct code:

end!

Guess you like

Origin blog.csdn.net/weixin_44299027/article/details/129546094