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 setup>
    const onchange = ({ id, action, task, originalValue }) => {
        console.log(id, action, task, originalValue);
    };
</script>

<template>
  <Tasklist :value="value" :onchange="onchange" />
</template>

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

Loading and saving comments through REST helper​

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

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

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

Saving changes in tasks​

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

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

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