import { ref, onMounted, computed } from 'vue';
const title = ref('My Vue App');
const items = ref([]);
const showModal = ref(false);
const currentPage = ref(1);
const itemsPerPage = ref(10);
onMounted(async () => {
const data = await fetch('/api/items');
items.value = await data.json();
});
const totalPages = computed(() => {
return Math.ceil(items.value.length / itemsPerPage.value);
});
const addItem = () => {
const newItem = {
id: items.value.length + 1,
title: `Item ${items.value.length + 1}`,
description: 'This is a description.',
};
items.value.push(newItem);
};
const removeItem = (id) => {
items.value = items.value.filter(item => item.id !== id);
};
const nextPage = () => {
if (currentPage.value < totalPages.value) {
currentPage.value++;
}
};
const prevPage = () => {
if (currentPage.value > 1) {
currentPage.value--;
}
};
const confirm = () => {
showModal.value = false;
// Perform some action
};
const cancel = () => {
showModal.value = false;
};
const fetchMoreItems = async () => {
const data = await fetch(`/api/items?page=${currentPage.value}`);
const newItems = await data.json();
items.value = [...items.value, ...newItems];
};