Invalid prop: type check failed for prop "value". Expected String, got Boolean with value true.
时间: 2023-08-03 10:44:06 浏览: 112
2020-web前端-vue项目出错-[Vue warn]: Invalid prop: custom validator check failed for prop “index”.
5星 · 资源好评率100%
这个错误通常出现在你使用一个布尔类型的值作为一个字符串类型的属性值传递给了一个组件。这时,Vue会提示你类型检查失败。
例如,如果你有一个名为`my-component`的组件,它有一个名为`message`的属性,类型为字符串:
```javascript
Vue.component('my-component', {
props: {
message: String
},
template: '<div>{{ message }}</div>'
});
```
然后,你在使用`my-component`时,将一个布尔类型的值`true`作为`message`属性的值传递给了它:
```html
<my-component :message="true"></my-component>
```
这时,你就会看到类似于`Invalid prop: type check failed for prop "message". Expected String, got Boolean with value true.`的错误提示。
解决这个问题的方法是将布尔类型的值转换为字符串类型。你可以使用`toString()`方法或者模板字符串来实现:
```html
<!-- 使用toString()方法 -->
<my-component :message="true.toString()"></my-component>
<!-- 使用模板字符串 -->
<my-component :message="`${true}`"></my-component>
```
这两种方法都会将布尔类型的值转换为字符串类型,从而避免了类型检查失败的错误。
阅读全文