data = {
  title: 'Comment App',
  comments: [],
  comment: "",
  username: "",
}

app = new Vue({
  el: '#app',
  data: data,
  methods: {
    getComments: function(){
      fetch('/get/comments.json')
        .then(response => response.json())
        .then(response => this.comments = response)
    },
    setComments: function(){
      fetch(`/set/comment?username=${this.username}&body=${this.comment}`)

      // reset the comment
      this.resetInput()

      // update the comment
      this.getComments()
    },
    removeComment: function(id, index){
      fetch(`/remove/comment/${id}`)

      // delete manual
      this.comments.splice(index, 1)

      // update the comment
      this.getComments()
    },
    resetInput: function(){
      this.comment = ''
      this.username = ''
    }
  },
});

// init
app.getComments();