Goods.vue:1929 [Vue warn]: Invalid prop: type check failed for prop "visible". Expected Boolean, got Number with value 1.
时间: 2024-10-09 07:12:51 浏览: 49
Vue-Socket.io:for Vuejs和Vuex的Socket.io实现
这个警告是在 Vue.js 应用程序中遇到的,它表明在 `Goods.vue` 文件的第 1929 行,有一个名为 "visible" 的属性,在绑定值的时候遇到了类型检查失败。预期这个属性应该接收布尔值(Boolean),但实际上接收到的是数字(Number),并且数值为 1。这意味着开发者可能期望 `visible` 属性是一个显示/隐藏开关,仅接受 true 或 false 的状态,而在这里传递了整数 1 导致了错误。
解决这个问题需要在组件中设置 `visible` 的数据或 props 并确保传入的是布尔类型的值。例如,如果这是在 props 中:
```vue
<template>
<div v-if="props.visible === true">...</div>
</template>
<script>
export default {
props: {
visible: { // 将其声明为布尔类型
type: Boolean,
required: true,
default: false,
},
},
};
</script>
```
如果这是在组件内部处理的:
```vue
<template>
<button @click="toggleVisibility">Toggle</button>
<div v-show="visible">...</div>
</template>
<script>
export default {
data() {
return {
localVisible: false, // 数据驱动,初始值为 false
};
},
methods: {
toggleVisibility() {
this.localVisible = !this.localVisible; // 使用布尔值切换
},
},
computed: {
visible: {
get() { return this.props.visible }, // 如果需要暴露给父组件
set(value) { this.localVisible = value; }, // 设置 prop 时同步更新 localVisible
},
},
};
</script>
```
阅读全文