Instantly share code, notes, and snippets.

@considine /app.js
Last active Aug 24, 2018

Embed
What would you like to do?
Home Component final
const HomeComponent = Vue.component("home-component", {
template: "<div> \
<button class='btn btn-secondary m-2' v-on:click='logout'> Logout </button> \
<div class='container'>\
<input style='max-width: 500px;' class='form-control mx-auto' type='text' v-model='newTodo' v-on:keyup.enter='addTodo'> \
<div style='max-width: 500px;' class='card mx-auto' v-for='todo in todos'> \
<div class='card-body'> \
<button v-on:click='deleteTodo(todo)' type='button' class='close'> \
<span>&times;</span> \
</button> \
<p> {{todo.get('text')}} </p> \
</div> \
</div> \
</div> \
</div>",
mounted: function () {
if (!Parse.User.current()) {
this.$router.replace("/login");
return;
}
this.fetchTodos();
},
data: function () {
return {
todos: [],
newTodo: ""
}
},
methods: {
logout () {
Parse.User.logOut()
.catch(function(e) {})
.then(() => {
this.$router.replace("/login");
})
},
fetchTodos() {
new Parse.Query("Todo").descending("createdAt").find()
.then((todos) => {
this.todos = todos;
})
},
addTodo() {
if (!this.newTodo || this.newTodo.length === 0) return;
var todoParseObject = new Parse.Object("Todo", {
"text": this.newTodo
});
todoParseObject.save()
.then((newTodo) => {
this.todos = [newTodo].concat(this.todos);
this.newTodo = "";
})
.catch((function (e) {
alert("Error saving todo! " + e.message);
}))
},
deleteTodo(todo) {
todo.destroy()
.then(() => {
this.fetchTodos();
})
.catch(function(e) {
alert("Error destroying todo! " + e.message);
})
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment