Vue.js if语句的问题。工作真的很奇怪
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js if语句的问题。工作真的很奇怪相关的知识,希望对你有一定的参考价值。
我会告诉你我的问题尽可能简单:
使用:
Vue.js,TWIG,iCheck(如果那件事)。
领域:
userEditObj.role
- 来自Vue.js的["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属性中使用mustaches,但我甚至找不到替代品。
当找不到索引时,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字符串,因为数组填充了字符串变量。
您可以通过更改代码的其他部分来跳过“stringify”步骤。
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
问题出在iCkeck lib上。看起来它不刷新由input属性更改的复选框。我不得不摧毁iCkeck并重新开火。现在有效。
以上是关于Vue.js if语句的问题。工作真的很奇怪的主要内容,如果未能解决你的问题,请参考以下文章