I'm implementing a checkbox component using vaadin and lit. I've implemented it according to the vaadin documentation, but I don't see the grouped checkboxes.
When debugging in the console, "render ()" is called first, followed by "firstUpdated ()". So I know that the property values will be an empty array.
However, I don't understand why this happens even though I implement it like the sample. How can I implement it correctly?
This is custom element.
import { customElement, state } from 'lit/decorators.js';
import { html, LitElement } from 'lit';
import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '@vaadin/vaadin-checkbox/vaadin-checkbox-group'
import '@vaadin/vaadin-checkbox/vaadin-checkbox'
import { CheckboxElement } from '@vaadin/vaadin-checkbox';
import { Person } from '../../util/person';
import { getPeople } from '../../util/personUtil';
@customElement('checkbox-indeterminate')
export class CheckboxIndeterminate extends LitElement {
@state()
private items: Person[] = [];
@state()
private selectedIds: string[] = [];
async firstUpdated() {
this.items = await getPeople();
this.selectedIds = [String(this.items[0].id), String(this.items[2].id)];
console.log(`firstUpdated: ${JSON.stringify(this.items)}`);
console.log(`firstUpdated: ${JSON.stringify(this.selectedIds)}`);
}
render() {
console.log(`render: ${JSON.stringify(this.items)}`);
console.log(`render: ${JSON.stringify(this.selectedIds)}`);
return html`
<vaadin-vertical-layout theme="spacing">
<vaadin-checkbox
.checked="${this.selectedIds.length === this.items.length}"
.indeterminate="${this.selectedIds.length > 0 && this.selectedIds.length < this.items.length}"
@change="${(e: Event) =>
(this.selectedIds = (e.target as CheckboxElement).checked
? this.items.map((person) => String(person.id))
: [])}"
>
Notify users
</vaadin-checkbox>
<vaadin-checkbox-group
label="Users to notify"
theme="vertical"
.value="${this.selectedIds}"
@value-changed="${(e: CustomEvent) => (this.selectedIds = e.detail.value)}"
>
${this.items.map((person) => {
return html`
<vaadin-checkbox .value="${String(person.id)}">
${person.firstName} ${person.lastName}
</vaadin-checkbox>
`;
})}
</vaadin-checkbox-group>
</vaadin-vertical-layout>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'checkbox-indeterminate': CheckboxIndeterminate;
}
}
This is getPeople()
method.
import { Person } from './person';
export async function getPeople(): Promise<Person[]> {
return [
new Person(1, "Aria", "Bailey"),
new Person(2, "Aaliyah", "Butler"),
new Person(3, "Eleanor", "Price")
]
}
This is Person
class.
export class Person {
id: number;
firstName: string;
lastName: string;
constructor(id: number, firstName: string, lastName: string) {
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
}
}
getPeople()
return? In the example in the documentation, it returns an object with apeople
property that is destructed (const { people } = ...
) and then assigned to theitems
property (this.items = people
). This step is missing for your example, but it's not clear whether that's an actual omission or intended because yourgetPeople()
returns something different.export async function getPeople(): Promise<PeopleResult>
returns an object calledPeopleResult
with an array ofPerson
and a number ofhierarchyLevelSize
. Thecheckbox-indeterminate
sample didn't need thehierarchyLevelSize
, so thegetPeople()
I made returns an array ofPerson
. This method isexport async function getPeople(): Promise<Person[]>
. ThegetProple()
I made just returns an array of 3 Persons.firstUpdated
log messages to verity thatgetPeople()
actually returns a Promise with an array of three person objects? I tried running your code example, but with my own simple implementation ofgetPeople()
since you didn't share yours, and it seems to work exactly as expected for me. If I change it so that the array is empty, then there will be an error in the browser console and the checkbox group will not be shown as you described.getPeople()
method in the question. In the console log, therender()
method is called first, and theitems
are empty. After that, thefirstUpdated()
method is called, anditems
has three values in it. However, the list is not output on the screen.tsconfig.json
. I had specifiedESNext
fortarget
, so it was not outputting to the screen. Thank you very much for trying.