20CAKE20.JS
04-state

State

14

04-state/11-computed-write.tsx

Computed Write

Example

Official Cake20 View example for computed write.

export const data = {
  firstName: "Cake",
  lastName: "Twenty",
};

export const computed = {
  fullName: {
    get: () => `${data.firstName} ${data.lastName}`,
    set(value: string) {
      const [firstName = "", ...lastName] = value.trim().split(/\s+/);
      data.firstName = firstName;
      data.lastName = lastName.join(" ");
    },
  },
};

export default () => <input class="rounded border p-2" bind={computed.fullName} />;