vue.runtime.esm.js?c320:4605 [Vue warn]: Invalid prop: type check failed for prop "collapse". Expected Boolean, got Function
时间: 2023-11-04 09:37:51 浏览: 113
This error message means that the "collapse" prop is expecting a boolean value, but it is receiving a function instead.
To fix this error, you should check where the "collapse" prop is being used and ensure that it is being passed a boolean value. If the value needs to be dynamic or computed, make sure that the function returns a boolean value.
For example, if you have a component that uses the "collapse" prop:
<template>
<div>
<button @click="toggleCollapse">{{ collapse ? 'Expand' : 'Collapse' }}</button>
<div v-if="!collapse">
<p>Some content here</p>
</div>
</div>
</template>
<script>
export default {
props: {
collapse: {
type: Boolean,
default: false
}
},
methods: {
toggleCollapse() {
this.$emit('update:collapse', !this.collapse);
}
}
}
</script>
In this example, the "collapse" prop is used to conditionally render the content inside the component. The "toggleCollapse" method is used to toggle the value of the "collapse" prop.
If you are passing a function instead of a boolean value to the "collapse" prop, you will need to update the code to pass a boolean value instead:
<template>
<my-component :collapse="isCollapsed"></my-component>
</template>
<script>
export default {
data() {
return {
isCollapsed: false
}
},
methods: {
toggleCollapse() {
this.isCollapsed = !this.isCollapsed;
}
}
}
</script>
In this example, we are passing the "isCollapsed" data property to the "collapse" prop. The "toggleCollapse" method is used to update the value of "isCollapsed" which will then update the "collapse" prop.
阅读全文