javascript - Vue.js的if语句问题。工作真的很奇怪

我将尽可能简单地向您展示我的问题：

使用：

Vue.js，TWIG，iCheck（如果有的话）。

栏位：

userEditObj.role-["1","2","3"]来自Vue.js

kid.id-1这是来自TWIG

问题：

${ userEditObj.role.indexOf({{ kid.id }}) > 0 ? true : false }-运行良好。

在这里我想设置我复选框的选中属性取决于语句结果（对还是错）

:checked="userEditObj.role.indexOf({{ kid.id }}) > 0 ? true : false"-它不起作用。总是如此。

我也试图这样做：

:checked="userEditObj.role.indexOf({{ kid.id }})"-相同。永远是对的。

我听说我不能在HTML属性中使用胡须，但是我什至找不到替代品。

最佳答案

当找不到索引时，indexOf返回-1，因此，如果您要查找的是数组中的第一个元素，则检查> 0将不起作用。您需要>= 0。

使用? true : false是多余的，因为无论如何>= 0（和> 0）将返回该内容。

另外，如果kid.id === 1，则无论如何都不会起作用，因为1是int且userEditObj.role充满了字符串。

假设kid.id是一个int int树枝，您可能需要执行以下操作：

:checked="userEditObj.role.indexOf('{{ kid.id }}') >= 0"

想法是将kid.id输出为JS字符串，因为数组中填充了字符串变量。

您可以通过更改代码的其他部分来跳过“字符串化”步骤。

let role = ["1", "2", "3"];
let kidId = 1;
let kidIdString = "1";
console.log(role.indexOf(kidId)); // fails. returns -1
console.log(role.indexOf(kidIdString)); // found. returns 0