CODEWITHSUNDEEP
arraysobjectvue.js
Jaeger
Jaeger

Reputation: 1754

How do I replace one object by another in an array of objets with VueJS?

I'm building a website with VueJS and AdonisJS, and I'm setting up a possibility to publish or unpublish an article just by setting the draft attribute to true or false.

This attribute edition is possible from the index, where all the articles can be seen. I made a table where there's an action button that would toggle the attribute, which would send an HTTP POST request to Adonis with the ID.

My concern is for what comes after: I don't believe that replacing the whole array is the good option, but what should I do instead? I tried the following:

handlePublish (id) {
  this.$axios.post('/post/publish', {id: id}, {
    headers: {
      'Authorization': `Bearer [some token]`
    }})
    .then(response => {
      console.log(response)
      let toDelete = ''
      this.posts.map((post, index) => {
        if (post.id === id) {
          toDelete = index
        }
      })

    this.posts.splice(toDelete, 1)
    this.posts.push(response.data)
 })
 .catch(e => console.log(e.response))
}

But somehow nothing gets update, excepted in the database.

Thank you in advance

Upvotes: 0

Views: 54

Answers (1)

Anurag Awasthi
Anurag Awasthi

Reputation: 6223

You are using map to iterate over array. Instead you can use map to get updated array by returning the new element in place of old,

.then(response => {
    this.posts = this.posts.map((post, index) => {
        if (post.id === id) {
          return response.data
        }
    })
}

Upvotes: 1

Related Questions