怎么解决这段报错Invalid prop: type check failed for prop "isLikinged". Expected Boolean, got Number with value -1. found in ---> <LikingCom> at src/components/likingCom.vue <ArticleIndex> at src/views/article/articleView.vue <App> at src/App.vue在<template> <div> <van-button class="starbtn" :icon="isLikinged ? 'good-job' : 'good-job-o'" type="primary" @click="LikingFn" :loading="likingLoading" /> <!-- <van-icon color="#777" name="good-job-o" /> --> </div> </template> <script> import { likingGoApi, likingOutApi } from "@/api/article"; export default { model: { prop: "isLikinged", event: "isLikingFn", //子组件触发的事件 }, props: { isLikinged: Boolean, artId: [Number, String], //作者id }, data() { return { likingLoading: false, //收藏按钮的loading }; }, methods: { async LikingFn() { // 收藏/取消收藏文章的点击方法 try { this.likingLoading = true; if (this.isLikinged) { // 为true的时候取关 await likingOutApi(this.artId); this.$toast.success("点赞成功"); } else { // 走关注接口 await likingGoApi(this.artId); this.$toast.success("取消点赞"); } this.likingLoading = false; // 关注或未关注,都要修改按钮的视图状态 // props单向数据流,不能在子组件修改,子向父 // this.$emit("isFollowedFn"); //this.$emit触发input自定义事件 // this.$emit("input", !this.value); this.$emit("isLikingFn", !this.isLikinged); } catch (error) { console.log(error); } }, }, }; </script> <style scoped lang="less"> /deep/.starbtn { background: #fff; border: 0px; color: #3a3a3a; .van-icon-star-o { color: #3a3a3a; } .van-icon-star { color: #ff9912; } } </style>代码里
时间: 2023-12-10 09:41:30 浏览: 127
这个报错是因为父组件给子组件传入了一个名为 `isLikinged` 的 prop,但是该 prop 的类型应该是 Boolean 类型,而实际传入的是一个 Number 类型的值 `-1`。你需要在父组件中检查并修正传递给子组件的 `isLikinged` 值,确保其为 Boolean 类型。
如果你确认传递给子组件 `LikingCom` 的 `isLikinged` 值是正确的,那么你可能需要检查子组件 `LikingCom` 中的代码,确保它正确处理了 `isLikinged` prop 的类型。你可以在子组件的 `props` 中指定 `isLikinged` 为 Boolean 类型,这样就可以在子组件中强制转换类型了。例如:
```js
props: {
isLikinged: {
type: Boolean,
default: false,
required: true,
},
},
```
这样在子组件中使用 `isLikinged` 属性时,就会被强制转换成 Boolean 类型,避免了类型错误的问题。
相关问题
Invalid prop: type check failed for prop "isLikinged". Expected Boolean, got Number with value -1. found in ---> <LikingCom> at src/components/likingCom.vue <ArticleIndex> at src/views/article/articleView.vue <App> at src/App.vue
这个错误信息表示在组件`LikingCom`中,`isLikinged`这个prop的类型应该是Boolean,但实际传入的是一个Number类型的值-1。你需要检查一下在哪里给`LikingCom`传递了`isLikinged`这个prop,并确保传递的值是一个Boolean类型的值,而不是Number类型的值。你也可以在`LikingCom`组件中添加一个类型检查来避免这个错误,例如:
```
props: {
isLikinged: {
type: Boolean,
required: true,
default: false
}
}
```
uview 的 u-switch 报错Invalid prop: type check failed for prop "value". Expected Boolean, got Number with value 0.
在uview的u-switch组件中,报错说"Invalid prop: type check failed for prop 'value'. Expected Boolean, got Number with value 0." 这意味着u-switch组件的prop 'value'预期是一个布尔值,但实际传递给它的是一个数值0。这个错误的解决方法是将传递给u-switch组件的值转换为布尔值。
解决方法如下:
在使用u-switch组件时,确保将传递给'value' prop的值转换为布尔值。例如,如果你的值为0,可以使用三元表达式将其转换为布尔值。你可以在模板中使用以下代码:
```html
<u-switch :value="loginForm.status === 0 ? false : true"></u-switch>
```
在这个例子中,我们将loginForm.status的值转换为布尔值,如果它的值为0,那么'value' prop将设置为false,否则设置为true。这样可以避免报错。
希望这个解决方法对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Invalid prop: type check failed for prop “border“. Expected Boolean, got String with value “false...](https://blog.csdn.net/qq_44336376/article/details/123048606)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue表单验证中 Invalid prop: type check failed for prop “model“. Expected Object, got String with ...](https://blog.csdn.net/weixin_43413645/article/details/124280038)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文