无效的 prop:类型检查失败，但代码按我预期工作

Question

>在网格布局中，我试图根据像这样的布尔标志动态设置两个列大小<v-col v-if="this.displayMeeting" cols="4">下面设置第二列，如下所示<v-col :cols="[displayMeeting ? '8' : '12']">

当页面显示时，我在控制台中得到这个

[Vue warn]: Invalid prop: type check failed for prop "cols". Expected Boolean, String, Number, got Array

但是页面布局有效。 如果存在会议窗口，我会得到两个 cols 一个class="col col-4"，另一个class="col col-8"。 如果我错误地设置了布尔标志，则一列消失，第二列从 8 跳到 12。

所以它可以工作，但在控制台中有两个警告？

Answer 1

您正在提供一个数组及其预期的布尔值、数字或字符串，因此通过删除方括号包装将其替换为字符串。

<v-col :cols="displayMeeting ? '8' : '12'">
<!--- here --^^-------------------------^^---->