1.在写循环的时候遇见这个的
![2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index" 2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index"](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTIwMjAwNTA0MDEzNDQ2NjExLnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMMmwwZDJGdVozbGhibWMxTWpBPSxzaXplXzE2LGNvbG9yX0ZGRkZGRix0Xzcw)
![2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index" 2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index"](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTIwMjAwNTA0MDEzNDAzODYyLnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMMmwwZDJGdVozbGhibWMxTWpBPSxzaXplXzE2LGNvbG9yX0ZGRkZGRix0Xzcw)
1.原因: index的值不能有空格,并且要为字符串类型
2.解决方法:加toString()
这个方法
![2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index" 2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index"](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTIwMjAwNTA0MDEzNjA1ODUzLnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMMmwwZDJGdVozbGhibWMxTWpBPSxzaXplXzE2LGNvbG9yX0ZGRkZGRix0Xzcw)
![2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index" 2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index"](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTIwMjAwNTA0MDEzNTQxOTA1LnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMMmwwZDJGdVozbGhibWMxTWpBPSxzaXplXzE2LGNvbG9yX0ZGRkZGRix0Xzcw)
3.前方高能,(还是有一种,装13的方式),开始了
1.定义一个filters
js的代码:
filters: {
numToString(value) {
return value.toString()
}
},
2.在<template>
里面引用filters
template代码:
:index="index | numToString"
![2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index" 2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index"](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTIwMjAwNTA0MDIwODAyMjcucG5nPyx0eXBlX1ptRnVaM3BvWlc1bmFHVnBkR2ssc2hhZG93XzEwLHRleHRfYUhSMGNITTZMeTlpYkc5bkxtTnpaRzR1Ym1WMEwybDBkMkZ1WjNsaGJtYzFNakE9LHNpemVfMTYsY29sb3JfRkZGRkZGLHRfNzA=)
搞定!!!!!
4.终极版:架构师的方案:
1.先在common文件中新建一个common.js文件
![2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index" 2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index"](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTIwMjAwNTA0MDIxODA1NDc5LnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMMmwwZDJGdVozbGhibWMxTWpBPSxzaXplXzE2LGNvbG9yX0ZGRkZGRix0Xzcw)
2.再在common.js,写入代码
export default {
filters: {
numToString(value) {
return value.toString()
}
}
}
![2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index" 2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index"](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTIwMjAwNTA0MDIxOTE1NTcwLnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMMmwwZDJGdVozbGhibWMxTWpBPSxzaXplXzE2LGNvbG9yX0ZGRkZGRix0Xzcw)
3.然后再你需要的页面引入
import common from '@/common/mixins/common.js'
1.然后再讲引入到export default
export default {
mixins: [common],
}
![2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index" 2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop "index"](/default/index/img?u=aHR0cHM6Ly93d3cuaWNvZGU5LmNvbS9pL2xsLz9pPTIwMjAwNTA0MDIyMDUyNTI2LnBuZz8sdHlwZV9abUZ1WjNwb1pXNW5hR1ZwZEdrLHNoYWRvd18xMCx0ZXh0X2FIUjBjSE02THk5aWJHOW5MbU56Wkc0dWJtVjBMMmwwZDJGdVozbGhibWMxTWpBPSxzaXplXzE2LGNvbG9yX0ZGRkZGRix0Xzcw)
还是一样的完美,豪横
,