[Vuejs]-Update dom to render results after api request

by

0👍

You shold have an array of tasks in your Vue component. Sending an http request deletes the resource from the server, but not locally. To delete the resource inside your component you’ll need to do it in the .then() part for example like this:

data() return {
   tasks: []
},

deletePost(id) {
    axios.delete(`http://localhost:3000/tasks/${id}`)
    .then((resp) => {
    console.log(resp.data)
    // Here we delete the task from the component locally
    // Note that we only want to delete it if the request is successful
    let index= this.tasks.find(task => task.id === id)
    this.tasks.splice(index,1);
  })
  .catch((err) => {
    console.log(err)
  }) 
},
  //this is how i've seen people doing it, but it's not working for me. 
  updatePost(selected, id) {
    axios.put(`http://localhost:3000/tasks/${id}`,{ status: selected } )
    .then(function(response){
        console.log('saved successfully')
      }.bind(this));  
   }
},

0👍

Thanks for replying to my first post here so quickly, of course i should’ve provided the whole script and not just the api request… 

  data () {
    return {
      tasks: [],
      formValue: '', 
      selected: '' 
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    '$route': 'fetchData', 
  },
  methods: {
    fetchData () {
      axios.get('http://localhost:3000/tasks')
      .then((resp) => {
        this.tasks = resp.data
        console.log(resp.data)
      })
      .catch((err) => {
        console.log(err)
      })
    }, 
    deletePost(id) {
        axios.delete(`http://localhost:3000/tasks/${id}`)
        .then((resp) => {
        console.log(resp.data)
        // Here we delete the task from the component locally
        // Note that we only want to delete it if the request is successful
        let index= this.tasks.find(task => task.id === id)
      this.tasks.splice(index,1);
      })
      .catch((err) => {
        console.log(err)
      }) 
    },
      //updates post status
      updatePost(selected, id) {
        axios.put(`http://localhost:3000/tasks/${id}`,{ status: selected } )
        .then(function(response){
            console.log('saved successfully')
          }.bind(this));  
      }
  },
  }

Leave a comment