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

Question

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

使用:

Vue.js、TWIG、iCheck(如果有的话)。

字段:

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

kid.id - 1 这是来自 TWIG

问题:

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

这里我想根据语句结果设置复选框的选中属性(true 或 false)

:checked="userEditObj.role.indexOf({{ Kid.id }}) > 0 ? true : false" - 它不起作用。永远正确。

我也试图这样做:

:checked="userEditObj.role.indexOf({{ Kid.id }})" - 相同。永远正确。

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

Answer 1

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

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

此外，如果 kid.id === 1，这将不起作用，因为 1 是一个 int 并且 userEditObj.role充满了字符串。

假设 kid.id 是 twig 中的 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