0๐
<template>
<div id="app">
<section class="todo-wrapper">
<form @keydown.enter.prevent="">
<div v-bind:class="{ active: new_todo }" @click="addItem">+</div>
</form>
<div v-if="pending.length > 0">
<transition-group name="todo-item" tag="ul" class="todo-list">
<li v-for="(item, index) in pending" v-bind:key="index">
<span class="delete" @click="deleteItem(index)">
<span class="todo-text">{{ item.title }}</span></span
>
</li>
</transition-group>
</div>
<transition name="slide-fade">
<p class="status free" v-if="!pending.length">
<img src="empty.svg" alt="empty" />empty
</p>
</transition>
</section>
</div>
</template>
<script>
export default {
el: "#app",
data() {
return {
todoList: [],
new_todo: "",
showComplete: false,
showCanNotAdd: false,
};
},
computed: {},
mounted() {
localStorage.setItem("count", "one");
this.getTodos();
},
watch: {
todoList: {
handler: function (updatedList) {
localStorage.setItem("todo_list", JSON.stringify(updatedList));
},
deep: true,
},
},
computed: {
pending: function () {
return this.todoList.filter(function (item) {
return !item.done;
});
},
completed: function () {
return this.todoList.filter(function (item) {
return item.done;
});
},
completedPercentage: function () {
return (
Math.floor((this.completed.length / this.todoList.length) * 100) + "%"
);
},
today: function () {
var weekday = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = "0" + dd;
}
if (mm < 10) {
mm = "0" + mm;
}
today = {
day: weekday[today.getDay()],
date: mm + "-" + dd + "-" + yyyy,
};
return today;
},
},
methods: {
getTodos() {
if (localStorage.getItem("todo_list")) {
this.todoList = JSON.parse(localStorage.getItem("todo_list"));
}
},
addItem() {
if (condition) {
}
this.todoList.unshift({
id: this.todoList.length,
title: "click " + localStorage.getItem("count"),
done: false,
});
this.new_todo = "";
return true;
},
deleteItem(index) {
this.todoList.splice(index, 1);
},
},
};
</script>
try this out
Source:stackexchange.com