Skip to content

Instantly share code, notes, and snippets.

@petervmeijgaard
Last active September 13, 2017 05:24
Show Gist options
  • Save petervmeijgaard/67b32e30c6e98d3b5527 to your computer and use it in GitHub Desktop.
Save petervmeijgaard/67b32e30c6e98d3b5527 to your computer and use it in GitHub Desktop.
Todo Vue.js Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Todo Vue.js Example</title>
<link rel="stylesheet"
type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<style type="text/css">
#app {
margin-top: 2rem;
}
.list-group .list-group-item.disabled {
cursor: default;
text-decoration: line-through;
}
</style>
<script type="text/javascript">
window.onload = function () {
new Vue({
el: '#app',
data: {
todoList: [],
newTodo: {
content: '',
done: false
},
errors: []
},
methods: {
addTodo: function () {
var tempTodo = {
content: this.newTodo.content,
done: this.newTodo.done
};
// Empty the errors
this.errors = [];
// Check if the name is filled in
if (tempTodo.content) {
this.todoList.push(tempTodo);
} else {
this.errors.push('You need to fill in a todo');
}
// Reset the to do
this.newTodo.content = '';
},
deleteTodo: function (todo) {
this.todoList.pop(todo);
},
toggleTodo: function (todo) {
todo.done = !todo.done;
}
}
})
}
</script>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form class="form-horizontal">
<div class="alert alert-danger"
v-for="error in errors">{{error}}
</div>
<div class="form-group">
<label for="todo"
class="col-sm-2 control-label">Todo</label>
<div class="col-sm-10">
<input type="text"
class="form-control"
v-model="newTodo.content"
placeholder="Todo"
id="todo">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button @click.prevent="addTodo()"
class="btn btn-primary btn-block">Add Todo
</button>
</div>
</div>
</form>
<ul class="list-group">
<li class="list-group-item"
v-for="todo in todoList"
:class="{'disabled' : todo.done}"
@click.prevent="toggleTodo(todo)">
<button type="button"
class="close"
@click.prevent="deleteTodo(todo)">
<span aria-hidden="true">
&times;
</span>
<span class="sr-only">
Close
</span>
</button>
{{todo.content}}
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment