Home Component final

app.js

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);
      })
    }
  }
})