Skip to content

Instantly share code, notes, and snippets.



Last active May 17, 2019
What would you like to do?
[BLOG] Vue Todo App Example
<div class="home">
<div class="row">
<input type="text"
placeholder="Enter a new task">
<button class="create"
@click="createTask()">ADD TASK</button>
<div class="header">My Todo List</div>
<div class="row"
v-for="task of allTasks"
<div class="form-field">
<input type="checkbox"
<label :for="">{{}}</label>
<button class="delete"
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Task from '../models/task.model';
import TasksServiceInstance from '../services/tasks.service';
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 {
async getTasks(): Promise<void> {
this.allTasks = await this.tasksService.getTasks();
async createTask(): Promise<void> {
await this.tasksService.createTask(this.newTask); = 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();
<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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment