Question

我会告诉你我的问题尽可能简单：

使用：

Vue.js，TWIG，iCheck（如果那件事）。

字段：

来自Vue.js的

userEditObj.role - ["1","2","3"]

kid.id - 1 这是来自TWIG

问题：

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

这里我想设置我的复选框的checked属性取决于语句结果（ true或false ）

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

我也试图这样做：

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

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

Answer 1

当找不到索引时，

indexOf返回-1，如果您要查找的内容是数组中的第一个元素，则检查> 0将无法正常工作。您需要>= 0。

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

此外，如果kid.id === 1，这仍然无法正常工作，因为1是一个整数，userEditObj.role充满了字符串。

假设kid.id是twig中的int，您可能需要执行以下操作：

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

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

您可以跳过＆＃34; stringify＆＃34;逐步更改代码的其他部分。

＆＃13;

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

＆＃13;

Answer 2

问题在于 iCkeck lib。看起来它不刷新由input属性更改的复选框。我不得不摧毁iCkeck并重新开火。现在有效。

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

2 个答案: