Skip to main content

onchange

Description​

Fires when the data of the task list changes

Usage​

onchange?: (ev: {
    action: "add" | "update" | "delete";
    id?: number | string;
    task?: {
        id?: string | number;
        content: string;
        status?: number;
    };
    data: {
        id?: string | number;
        content: string;
        status?: number;
    }[];
    originalValue: {
        id?: string | number;
        content: string;
        status?: number;
    }[] | number | string;
}) => void;

Parameters​

The onchange callback receives a single event object with the following properties:

  • action – (required) the type of change that occurred. Possible values:

    • "add" – a new task was added
    • "update" – an existing task was modified
    • "delete" – a task was removed

  • id – (optional) the identifier of the changed task

  • task – (optional) the changed task object. The object may include:

    • id – (optional) a unique identifier of the task
    • content – (required) the text content of the task
    • status – (optional) the status of the task that can be 0 for incomplete and 1 for complete

  • data – (required) the current list of tasks after the change. Each task object has the same structure as task above.

  • originalValue – (required) the initial value of the tasklist before changes. Can be an array of tasks (task parameter), a string, or a number depending on how the widget was initialized

Examples​

Detecting data changes​

<script>
    const onchange = ({ id, action, task, originalValue }) => {
        console.log(id, action, task, originalValue);
    };
</script>

<Tasklist value={value} onchange={onchange} />

In this example, the onchange function logs the details of the change.

Loading and saving comments through REST helper​

<script>
    import { RestURL } from "@svar-ui/lib-data-provider";
    const url = new RestURL("https://some.com/api/tasks");
</script>

<Tasklist
    ondata={v => url.get(v)}
    onchange={({ action, task, id, originalValue: v }) => 
        url.path(v).save(action, task, id)}
/>

This example shows how to use the onchange event to save changes to a REST API.

Saving changes in tasks​

<script>
    import { Tasklist } from '@svar-ui/svelte-tasklist';
</script>

<Tasklist
    value={1}
    ondata={v => localStorage.getItem(`tasks-${v}`)}
    onchange={({ value }) => 
        localStorage.setItem(`tasks-${value}`, JSON.stringify(value))}
/>

This example demonstrates saving task changes to local storage whenever a change occurs.