lit-html选择组件事件处理程序
我正在使用一个名为LIT的库来创建自定义Web组件，并且尝试使用@change和@Select事件处理程序来显示另一个组件，没有运气。我似乎也找不到有关文档的信息。
我的代码看起来像这样：
return html`
<div>
<bx-select helper-text="Optional helper text" @change=${this._updateValue} label-text="Select" placeholder="HIV Test 1 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item
label-text=${item.label}
value=${item.concept}
.selected=${this.initialTestVal == item.concept}
>
${item.label}
</bx-select-item>`)}
</bx-select>
<bx-select helper-text="Optional helper text" label-text="Select" placeholder="HIV Test 2 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item @change=${this._updateValue}
label-text=${item.label}
value=${item.concept}
.selected=${this.confirmedTestVal == item.concept}
>
${item.label}
</bx-select-item>`)}
</bx-select>
<bx-select helper-text="Optional helper text" label-text="Select" placeholder="HIV Test 3 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item
label-text=${item.label}
value=${item.concept}
.selected=${this.finalTestVal == item.concept}
>
${item.label}
</bx-select-item>`
)}
</bx-select>
</div>`;
对此的任何帮助/建议将不胜感激。
I am using a library called lit to create custom web components and i have tried using the @change and @select event handlers to display another component with no luck. I also can't seem to find the info on the docs.
My code looks like this :
return html`
<div>
<bx-select helper-text="Optional helper text" @change=${this._updateValue} label-text="Select" placeholder="HIV Test 1 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item
label-text=${item.label}
value=${item.concept}
.selected=${this.initialTestVal == item.concept}
>
${item.label}
</bx-select-item>`)}
</bx-select>
<bx-select helper-text="Optional helper text" label-text="Select" placeholder="HIV Test 2 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item @change=${this._updateValue}
label-text=${item.label}
value=${item.concept}
.selected=${this.confirmedTestVal == item.concept}
>
${item.label}
</bx-select-item>`)}
</bx-select>
<bx-select helper-text="Optional helper text" label-text="Select" placeholder="HIV Test 3 Results:">
${this.answers?.map(
(item: any) => html`<bx-select-item
label-text=${item.label}
value=${item.concept}
.selected=${this.finalTestVal == item.concept}
>
${item.label}
</bx-select-item>`
)}
</bx-select>
</div>`;
Any help/ advise on this will be appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
基于名称
＆lt; bx-select＆gt;我假设您正在使用Carbon Web组件。不幸的是，它看起来并不像在文档中列出，但是当您选择时触发的事件名称似乎是
bx选择选定选择，因此您需要在中添加一个事件侦听器@BX选择选定。可以在这里看到 https：// web-components。 carbondesignsystem.com/?path=/story/components-select-default 当您选择一个选项并查看下面的“动作”选项卡。
您还可以查看组件的源代码以查看事件在此处派遣的位置 https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7aa46b76b76b76b76b76b33695d07f/src/src/src/components in href =“ https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7a46b76b76b33695507f/src/src/src/components/components/components/components/components/componts/componet/comelect/select.tss.tssuct.tl387” noreferrer“> https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7a46b76b76b3695695d07f/src/src/components
Based on the name
<bx-select>I'll assume you're using Carbon web components.Unfortunately it doesn't look like it's listed in the doc but the event name that's fired when you select appears to be
bx-select-selectedso you'd want to add an event listener with@bx-select-selected.This can be seen here https://web-components.carbondesignsystem.com/?path=/story/components-select--default when you select an option and see the "Actions" tab below.
You can also see the component's source code to see where the event is dispatched here https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7aa46b76b33695d07f/src/components/select/select.ts#L62 and the name is defined here https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7aa46b76b33695d07f/src/components/select/select.ts#L387.