vue.js

gist.vue

'use strict';

var vm = new Vue({
  http: {
      root: '/root',
      headers: {
        Authorization: 'Basic base64:QuCk1yu18qZuV/LfzGLjsCwU1A8oJJPurdypCWBGLpk=',
      },
      options: {
        emulateJSON: true,
        emulateHTTP: true
      }
    },

  el: '#NoteController',

  data: {
    newNote: {
      id: '',
      name: '',
      description: ''
    },

    edit: false,

  },

  methods: {

    fetchNote: function () {
      this.$http.get('http://localhost:8000/api/notes').then((notes) => {
        this.$set('notes', notes.json())
      }, (notes) => {
        console.log(data)
      });
    },

    RemoveNote: function (id) {
      var ConfirmBox = confirm("Are you sure, you want to delete this Note?")

      this.fetchNote()

      if(ConfirmBox) this.$http.delete('http://localhost:8000/api/notes/' + id)
      // if(ConfirmBox) this.$http.delete('http://localhost:8000/api/notes/' + id)

      this.fetchNote()

      Materialize.toast('Note Deleted', 5000, 'red accent-4');
   
      this.fetchNote()
      

    },

    EditNote: function (id) {
      var note = this.newNote

      this.newNote = { id: '', name: '',description: ''}

      this.$http.put('http://localhost:8000/api/notes/' + id, note).then((data) => {
      // this.$http.put('http://localhost:8000/api/notes/', note).then((data) => {
        console.log(data)
      }, (data) => {
        console.log(data)
      });

      this.fetchNote()

      this.edit = false

      Materialize.toast('Note Updated', 5000, 'blue accent-4');

    },

    ShowNote: function (id) {
      this.edit = true

      this.$http.get('http://localhost:8000/api/notes/' + id).then(function(data){
      // this.$http.get('http://localhost:8000/api/notes?id=' + id).then(function(data){
        this.newNote.id = data.data.id
        this.newNote.name = data.data.name
        this.newNote.description = data.data.description
      },(data)=>{
        console.log(data);
      });
    },

    AddNewNote: function () {
      // User input
      var note = this.newNote

      // Clear form input
      this.newNote = { name:'', description:''}

      this.fetchNote()

      // Send post request
      this.$http.post('http://localhost:8000/api/notes/', note)

      this.fetchNote()

      Materialize.toast('Note Created', 5000, 'green accent-4');

      // Reload page
      this.fetchNote()

    }

  },

  computed: {
    validation: function () {
      return {
        name: !!this.newNote.name.trim(),
        description: !!this.newNote.description.trim()
      }
    },

    isValid: function () {
      var validation = this.validation
      return Object.keys(validation).every(function (key) {
        return validation[key]
      })
    }
  },

  ready: function () {
    this.fetchNote()
  }
});

'use strict';

var vm = new Vue({
http: {
root: '/root',
headers: {
Authorization: 'Basic base64:QuCk1yu18qZuV/LfzGLjsCwU1A8oJJPurdypCWBGLpk=',
},
options: {
emulateJSON: true,
emulateHTTP: true
}
},

el: '#NoteController',

data: {
newNote: {
id: '',
name: '',
description: ''
},

edit: false,

},

methods: {

fetchNote: function () {
  this.$http.get('http://localhost:8000/api/notes').then((notes) => {
    this.$set('notes', notes.json())
  }, (e) => {
    alert('error')
    console.log(e)
  });
},

RemoveNote: function (id) {
  var ConfirmBox = confirm("Are you sure, you want to delete this Note?")

  if(ConfirmBox)
    this.$http.delete('http://localhost:8000/api/notes/' + id).then(() => {
          Materialize.toast('Note Deleted', 5000, 'red accent-4');
        this.fetchNote()
    }, (e) => {
        alert('error')
        console.log(e)
    })
  // if(ConfirmBox) this.$http.delete('http://localhost:8000/api/notes/' + id)

  

},

EditNote: function (id) {
  var note = this.newNote

  this.newNote = { id: '', name: '',description: ''}

  this.$http.put('http://localhost:8000/api/notes/' + id, note).then((data) => {
  // this.$http.put('http://localhost:8000/api/notes/', note).then((data) => {
    this.edit = false
    Materialize.toast('Note Updated', 5000, 'blue accent-4');
    this.fetchNote()
    
  }, (e) => {
    alert('error')
    console.log(e)
  });

  

  

},

ShowNote: function (id) {
  this.edit = true

  this.$http.get('http://localhost:8000/api/notes/' + id).then((data) => {
  // this.$http.get('http://localhost:8000/api/notes?id=' + id).then(function(data){
    this.newNote.id = data.data.id
    this.newNote.name = data.data.name
    this.newNote.description = data.data.description
  },(e)=>{
    alert('error')
    console.log(e);
  });
},

AddNewNote: function () {
  // User input
  var note = this.newNote

  // Clear form input
  this.newNote = { name:'', description:''}

  this.fetchNote()

  // Send post request
  this.$http.post('http://localhost:8000/api/notes/', note).then(() => {
  Materialize.toast('Note Created', 5000, 'green accent-4');
  this.fetchNote()
  }, (e) => {
    alert('error')
    console.log(e)
  })

}

},

computed: {
validation: function () {
return {
name: !!this.newNote.name.trim(),
description: !!this.newNote.description.trim()
}
},

isValid: function () {
  var validation = this.validation
  return Object.keys(validation).every(function (key) {
    return validation[key]
  })
}

},

ready: function () {
this.fetchNote()
}
});

@ryanda its not work

i have update the answer