Vue.js don't bind element replaced in an array. It works with splice.... why?

Viewed 31

I want to update the record base on the server response and refresh the data table without fetching the whole list. I found a solution but don't understand why this.items[this.editedIndex] = payload.data is !OK and ** this.items.splice(this.editedIndex, 1, payload.data)** is OK.

save() {
      fetch(this.api + "/" + this.editedItem.id, {
          method: "PUT",
          body: JSON.stringify(this.editedItem),
          headers: {
            "content-type": "application/json"
          }
        })
         .then(payload => payload.json())
         .then(payload => {
            this.items.splice(this.editedIndex, 1, payload.data) // THIS WORKS!!
            //this.items[this.editedIndex] = payload.data // THIS DOESN'T... WHY?
          })
          .catch()
      }
1 Answers

Vue can't detect directly updating an index in case of an array so use Vue.set method or it's alias $set method.

this.$set(this.items, this.editedIndex, payload.data)

Refer : Change Detection Caveats

Related