如何动态设置ion-toggle的checked属性 条件为false仍被选中如何解决

问题原因 #

你当前的写法是直接将判断表达式作为字符串传入了checked属性，而HTML的布尔型属性（比如checked、disabled、readonly）的规则是只要属性出现在标签上，无论属性值是什么，都会生效。哪怕你写checked="false"，浏览器也会识别为要开启选中状态，所以才会出现始终选中的问题。

解决方法 #

根据你使用的技术栈，选择对应的属性绑定写法即可：

• 原生JavaScript场景：不要在HTML标签内直接写判断逻辑，通过JS动态赋值：

<!-- 标签部分不写checked属性 -->
<ion-toggle slot="end" name="setting"></ion-toggle>

// JS部分动态设置
const toggleEl = document.querySelector('ion-toggle[name="setting"]')
toggleEl.checked = setting.is_activated === 1

• Vue框架场景：用v-bind（简写:）绑定属性，让框架解析表达式的布尔值：

<ion-toggle slot="end" :checked="setting.is_activated === 1" name="setting"></ion-toggle>

• React框架场景：用花括号包裹表达式绑定属性：

<ion-toggle slot="end" checked={setting.is_activated === 1} name="setting"></ion-toggle>

• Angular框架场景：用方括号绑定属性：

<ion-toggle slot="end" [checked]="setting.is_activated === 1" name="setting"></ion-toggle>

验证方法 #

修改代码后可以打开浏览器开发者工具的元素面板，查看渲染后的ion-toggle标签：当判断结果为false时，标签上不会出现checked属性，此时开关就会处于未选中状态。

内容的提问来源于stack exchange，提问作者CoderTn