# useTimeline
Tracks variable history
# Parameters
import { useTimeline } from "vue-composable";
const options = {
deep: Boolean,
maxLength: Number,
clone(entry: T): T
}
const timeline = useTimeline(value, options);
Parameters | Type | Required | Default | Description |
---|---|---|---|---|
value | Ref<T> | true | ref to track history | |
options | TimelineOptions<T> | false | { deep: false, maxLength: MAX_ARRAY_SIZE, clone: (x)=>x } | timeline options |
TIP
If tracking object please provide a options.clone
function.
// example
function clone(e) {
return JSON.parse(JSON.stringify(e));
}
# State
The useTimeline
function exposes the following reactive state:
import { useTimeline } from "vue-composable";
const timeline = useTimeline();
State | Type | Description |
---|---|---|
timeline | Ref<{item: T, date: Date}[]> | timeline array |
# Example
Type a text to enable undo and redo
History []
# Code
<template>
<div>
<p>Type a text to enable undo and redo</p>
<input v-model="value" />
<p>
<b>History</b>
{{ timeline }}
</p>
</div>
</template>
<script>
import { ref } from "@vue/composition-api";
import { useTimeline } from "vue-composable";
export default {
setup() {
const value = ref("");
const timeline = useTimeline(value);
return {
value,
timeline
};
}
};
</script>