Category Archives: Javasript

[Solved] Vue Project Error: Invalid prop: custom validator check failed for prop “percentage”.

1.Question:

The progress bar component using elementui in Vue reports an error

2. The error information is as follows:

vue.runtime.esm.js:619 [Vue warn]: Invalid prop: custom validator check failed for prop "percentage".

found in

---> <ElProgress> at packages/progress/src/progress.vue
       <AllStoreStatisticsDialog> at src/components/vdialog/dialog/Baomu/AllStoreStatisticsDialog.vue
         <Dialog> at src/components/vdialog/VDialog.vue
           <DialogGroup> at src/components/vdialog/vDialogGroup.vue
             <App> at src/views/SYS/App.vue
               <App> at src/App.vue
                 <Root>

3. Causes and Solutions

The original code is as follows

<el-progress :percentage="percentage" :color="customColor"></el-progress>

reason:

The percentage attribute value set exceeds 100, and the value range of percentage is 0-100

Solution:

When assigning the percentage attribute, just make a ternary operation judgment. The code is as follows

<el-progress :percentage="percentage>100?100:percentage" :color="customColor"></el-progress>

[Solved] Vue Import echarts Error: export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

Solution:

1. Change

import echarts from 'echarts';

import * as echarts from 'echarts';

2. Reinstall echarts and uninstall echars5.x. Install echarts4.x. It can also solve the problem.

[Solved] h5 Connect Wechat sdk Error: Cannot read property of undefined (reading ‘title’)

Download jweixin-1.6.0 directly 0.js file, import file

import wx from './jweixin-1.6.0.js';

Solution:

Jweixin-1.6.0.js file, just change this to window

VSCode Install go Plug-in ld Link Error [How to Solve]

problem:

When vscode installs tools, the DLV tool always reports an error. The error message is LD return 1;

Solution:

I checked the GitHub of DLV and found that CGO_Enabled can be disabled to solve this problem

go env -w CGO_ENABLED="0"

Vue configures the compression-webpack-plugin to package and compress JS and CSS Error

1.Install compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

2.vue.config.js configuration

const CompressionPlugin = require("compression-webpack-plugin");
const IS_PROD =["production","prod"].includes(process.env.NODE_ENV);


module.exports = {
  chainWebpack: (config) => {
    // enable js, css compression
    if (IS_PROD) {
      config.plugin("compressionPlugin").use(
        new CompressionPlugin({
          test: /\.js$|\.html$|\.css/, // Match file names
          threshold: 10240, // Compress data over 10k
          deleteOriginalAssets: false, // do not delete the source files
        })
      );
    }
  }
}

3. Run build error

 ERROR  TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined

The reason for troubleshooting is that the version is too high. Execute the following command

npm uninstall compression-webpack-plugin
npm i [email protected]

PS: I configured another project and reported other errors. The reason was the problem of the webpack version. Uninstall the current webpack version and install 4.0 0 version resolution

[Solved] View+ts $refs error: Property ‘previewHotel’ does not exist on type ‘Element’.

Questions:
this.$refs.districtMap.previewHotel(this.newHotel)

Error Messages:
Property ‘previewHotel’ does not exist on type ‘Element | Element[] | Vue | Vue[]’.
Property ‘previewHotel’ does not exist on type ‘Element’.

Solution:
(this.$refs.districtMap as Vue & {previewHotel:Function}).previewHotel(this.newHotel)

Reason:
TS type

[Solved] Vue3 Import Cutomize Components Error: Cannot find module ‘xxx‘ or its corresponding type declarations

1. Error reporting

1. Error reported in idea

2. Scaffold compilation error

2. Cause

There is no problem with the statements. Why do you report errors? Because the address of Import is wrong.

Solution:

import TheHeader from '../components/the-header.vue';
import TheFooter from "../components/the-footer.vue";
import TheSider from "../components/the-sider.vue";

3. The effects are as follows:

Perfect solution.

[Solved] VUE Project Error: Avoided redundant navigation to current location: “/XXX“

In Vue, the router encounters an error: avoided redundant navigation to current location: the error message shows that the route is duplicate

Solution: add the following code to get it done Under router folder index.js

// Solve the problem that vue-router in the navigation bar of ElementUI reports an error when repeatedly clicking the menu in version 3.0 or above
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

[Solved] vue Use Fullscreen Plug-in Error: Module parse failed: Unexpected token (55:42) You may need a…

The version of screenfull plug-in is too new. Just switch back to version 5.1

npm install --save-dev [email protected]

[Solved] Uncaught TypeError: Cannot create property ‘LAY_TABLE_INDEX’ on number ‘1’

table.js:2 Uncaught TypeError: Cannot create property ‘LAY_TABLE_INDEX’ on number ‘1’

Using the data table of the layui framework, render errors

Reason: when layui renders table data, the data value returned by the interface request should be in the form of * data: [{}, {}, {}], while my data form is in the form of data: {data: [{}, {}], statuscode: 1,…} *, so an error will be reported

Solution: parse the data in the parsedata function

table.render({
  elem: '  '
  ,url: '  '，
   parseData: function(res){
                console.log('Return Values',res)
                return {
                    "statusCode": res.statusCode, //Analyze interface status
                    "data": res.data.data //Parse the data list
                };
            },`

DebugAH

How to Solve Your Programmer Error