Skip to main content

value

Description​

Optional. An array of task objects to initialize the tasklist widget

Usage​

value?: string | number | {
  id?: string | number;
  content: string;
  status?: number;
}[];

Parameters​

The value property can be defined in several ways:

  • string | number - a task identifier
  • an array of task objects. Each task 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

Examples​

Initializing tasklist widget with data​

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

  const value = [
    {
      id: 7,
      content: "Optimize performance in Vue applications",
      status: 1,
    },
    {
      id: 8,
      content:
        "Work with API requests and data handling in Vue applications",
      status: 0,
    }
  ];
</script>

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

Initializing an empty tasklist widget​

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

<template>
  <Tasklist />
</template>

Initializing widget and loading tasks​

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

  const value = ref([]);

  onMounted(() => {
    fetch('/api/tasks')
      .then(r => r.json())
      .then(x => value.value = x);
  });
</script>

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