Skip to content

Instantly share code, notes, and snippets.

@agrgic16

agrgic16/Home.vue

Last active May 17, 2019
Embed
What would you like to do?
[BLOG] Vue Todo App Example
<template>
<div class="home">
<div class="row">
<input type="text"
class="form-field"
v-model="newTask.name"
placeholder="Enter a new task">
<button class="create"
:disabled="!newTask.name"
@click="createTask()">ADD TASK</button>
</div>
<div class="header">My Todo List</div>
<div class="row"
v-for="task of allTasks"
:key="task.id">
<div class="form-field">
<input type="checkbox"
:id="task.id"
:checked="task.complete"
v-on:change="toggleTask(task)">
<label :for="task.id">{{task.name}}</label>
</div>
<button class="delete"
@click="deleteTask(task.id)">DELETE</button>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Task from '../models/task.model';
import TasksServiceInstance from '../services/tasks.service';
@Component
export default class Home extends Vue {
private readonly tasksService = TasksServiceInstance;
private readonly newTask: Task = { name: null, complete: false };
private allTasks: Task[] | null = null;
created(): void {
this.getTasks();
}
async getTasks(): Promise<void> {
this.allTasks = await this.tasksService.getTasks();
}
async createTask(): Promise<void> {
await this.tasksService.createTask(this.newTask);
this.newTask.name = null;
await this.getTasks();
}
async toggleTask(task: Task): Promise<void> {
await this.tasksService.toggleTask(task);
await this.getTasks();
}
async deleteTask(id: number): Promise<void> {
await this.tasksService.deleteTask(id);
await this.getTasks();
}
}
</script>
<style lang="scss" scoped>
button {
height: 30px;
width: 100px;
margin: 2px;
border-radius: 5px;
font-weight: 600;
font-size: .8em;
&.delete {
color: red;
}
&.create {
color: black;
&:disabled {
color: lightgrey;
}
}
}
input {
border: 1px lightgrey solid;
font-size: 1.1em;
&[type=checkbox] {
transform: scale(1.5);
}
}
.home {
display: flex;
flex-direction: column;
align-items: center;
> .header {
font-weight: 600;
width: 650px;
margin-top: 30px;
border-bottom: solid 1px black;
}
> .row {
margin-top: 5px;
display: flex;
flex-direction: row;
align-items: left;
> .form-field {
display: flex;
align-items: left;
width: 500px;
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment