Tag Archives: VUE Project Error

[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 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)
}