Tag Archives: & View

Vue Render List Error: Avoid using non-primitive value as key, use string/number value instead.

As soon as you enter the page, an error is reported as follows

As soon as you enter a page, such a long string of errors will appear. This is because the key value may be repeated in the V-for loop, so this error will be reported. After checking the page code, it is found that the key value is duplicate

The key value must be unique. If it is repeated, an error will be reported.
this situation can be avoided by changing the key value to index or ID. (here, ID is best used for key to achieve the principle of unique key value and local reuse, which greatly saves DOM rendering)

[Solved] Vuex error: Error in callback for watcher “function() {return this._data.$$state}”

this._data.$$ state

Error content: error in callback for watcher "function() {return this._data.$$state}"

I also encountered this problem and tried to solve it. You can check whether the routing array object is stored in vuex and whether the array is directly referenced in state. You may need to make a deep copy before using it– razor

Note: JS array is reference assignment by default, and vuex can only change the state through mutation or action, bell The warnlist of the Vue component modifies the value of vuex

 

An uncaught (in promise) error occurs when Vue uploads a large file: network error at createerror

In the uploaded file, you will be prompted after reaching a certain event  

Uncaught (in promise) Error: Network Error at createError

 

Other interfaces are normal,

After inquiry, it is said that it is cross domain, but it is impossible to report an error only in the family with large files,

It is also suspected that the setting time is too long,

However, the size of the file received at the back end is too small,  

The split() string in the Vue project is converted into an array and an error is reported. Solution typeerror: cannot read property ‘split’ of null

In the Vue project, a common method split () is encountered. Because it is common and easy to remember, split (”) is recorded here,

The string is cut into an array with spaces as boundaries. Parameters can be written in quotation marks,

For example, split (‘,  ‘) ， This is to   , Cut bounds into arrays

 

  However, when converting a string into an array, an error will be reported if the string is empty

 

  In case of the above errors, you can judge first

 

Vue renders an error before asynchronously loading data

Original solution

https://blog.csdn.net/edc3001/article/details/86833558

 

An error that data cannot be obtained was encountered during development

 

  But the reality is normal

 

It is considered here that Vue has rendered before asynchronously loading data, and an error will be reported if the data is not obtained. The later implementation is normal because the two-way binding data has obtained automatic rendering

Vue initially defines the data and displays the acquired data in the

 

Solution: add V-IF in the main div of the component to judge that the object value is not empty before rendering

 

Use sass and less in Vue and solve the problem of error reporting (this. Getoptions is not a function)

Use less

Download dependency

npm install -D less less-loader

Add in main.js

import less from 'less';
Vue.use(less);

use

<style lang="less"></style>

Operation error

 

 

Reason: the version of less loader installed is too high

Solution: reinstall the lower version of

npm uninstall less-loader

npm install [email protected]

 

Using sass

Download dependency

npm install -D node-sass sass-loader style-loader

use

<style lang="scss" scoped></style>

Operation error

Cause: sass loader version is too high

Solution: reinstall the lower version of

npm uninstall sass-loader
npm install [email protected]

 

Node.js is upgraded from 12. X to 14. X. the original Vue project starts with an error

Error message:

         After nodejs upgrade, the Vue project starts with an error message, prompting the command “NPM rebuild node sass”

Solution:

        1. Execute on the command line   npm install -g cnpm –registry= https://registry.npm.taobao.org

        2. Execute the command again: NPM rebuild node sass

        3. Restart Vue project successfully