Skip to main content

onchange

onchange​

interface OnChange {
    // kind of change
    action: "add" | "update" | "delete";
    // id of changed task
    id?: number;
    // changed task
    task?: Task;
    // current tasks data
    data: Task[];
    // original tasks data
    originalValue: Task[] | number | string;
}

onChange(ev: OnChange): void

event is triggered when the data of the task list changes. It is useful for tracking changes made by the user, such as adding, updating, or deleting tasks.

Usage​

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 "wx-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 'wx-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.