英文:
Pass a boolean value to a Lit Component
问题
我想通过 DOM 将布尔值（true/false）传递给 Lit 组件。
我遇到了问题，因为它总是被转换为 true，我似乎找不到 lit 文档中的一个好例子。
所以基本上是这样的：
<my-element foo="false" />
...
@property({type: Boolean})
foo: boolean;
我尝试过的是尝试传递："${false}"
我创建了一个包含示例的 lit playground 链接。
英文:
I want to pass a boolean value (true/false) to a lit component via. the dom.
I'm having issues because it is always converted to true, I cant seem to find a good example for this in the lit documentation.
So basically:
<my-element foo="false" />
...
@property({type: Boolean})
foo: boolean;
What I tried allready is try to pass: "${false}"
答案1
得分: 1
在HTML中，布尔属性由它们是否存在来决定，而不是由字符串值决定。
您应该简单地省略该属性：
<my-element></my-element>
并将属性的默认值设置为false：
class MyElement extends LitElement {
@property({type: Boolean})
foo: boolean = false;
}
如果您在lit-html模板中编写标记，您可以使用布尔属性表达式：
let foo = false;
html`<my-element ?foo=${foo}></my-element>`;
英文:
In HTML, boolean attributes are dictated by whether they are present or not, not by the string value.
You should simply omit the attribute:
<my-element></my-element>
And default the property to false:
class MyElement extends LitElement {
@property({type: Boolean})
foo: boolean = false;
}
If you're writing markup within lit-html templates, you can use the boolean attribute expression.
let foo = false;
html`<my-element ?foo=${foo}></my-element>`;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论