解决 type check failed for prop “disabled“. Expected Boolean, got String with value “36“问题

解决prop警告问题

这种警告虽然不影响代码的运行，但是一直爆红看着也挺烦，一般当我们使用他人的组件时，传递类型时，和要求传入的类型不符合时，会出现这种情况

如下：

这个代码中，直接传入的id并不是一个布尔值，所以浏览器会一直弹出警告

解决方法：在$route.query.id之前加上双重逻辑非运算符（!!）即可

这样处理之后，控制台就不会一直弹出警告了。

双重逻辑非运算符的作用

双重逻辑非运算符的作用是将一个值转换为布尔类型，它会执行以下转换规则：

• 如果值为布尔类型，直接返回其对应的布尔值。
• 如果值为非布尔类型，则先将其转换为布尔类型，然后再进行逻辑非运算。

示例代码如下：

const value1 = 'hello';
const value2 = 0;
const value3 = {};
const value4 = null;
const value5 = undefined;

const booleanValue1 = !!value1;
const booleanValue2 = !!value2;
const booleanValue3 = !!value3;
const booleanValue4 = !!value4;
const booleanValue5 = !!value5;

console.log(booleanValue1); // 输出: true
console.log(booleanValue2); // 输出: false
console.log(booleanValue3); // 输出: true
console.log(booleanValue4); // 输出: false
console.log(booleanValue5); // 输出: false

在上述代码中，我们使用双重逻辑非运算符将不同类型的值转换为布尔类型。非布尔类型的值通过逻辑非运算先转换为对应的布尔类型，然后再输出转换后的结果。

注意：

值得注意的是，双重逻辑非运算符是一种快速而简洁的将其他类型转换为布尔类型的方法。但在使用时，应确保理解了转换的行为，以免产生意想不到的结果。