Vue data-binding in axios response is not updating in view

Question

I want to create a new item. After created successfully I need to update the item list. When I set the item list from server it fails to update in view.

<v-btn @click="create(item)" >
</v-btn>

data: () => ({
  items: [],
})
methods: {
  create (item) {
    createItem(item).then(response => {
      this.scene = this.scenes.list
      this.item = null
      var options = {
        page: 0,
        itemsPerPage: 10,
      }
      getItems(options).then(function (response) {
        this.items= response.content
      }.bind(this))
    })
},
}

When I debug, 'this.items= response.content' is successfuly set. But in view the data is not updated. How to fix this?

Boussadjra Brahim · Accepted Answer · 2020-11-09 19:09:38Z

1

Since you bind this to another context, this.items is no longer referring to the Vue instance, thus it won't update.

Declare the Vue instance to another variable before createItem, and you should be able to use it:

data: () => ({
  items: [],
})
methods: {
  create (item) {
    const vm = this;
    createItem(item).then(response => {
      this.scene = this.scenes.list
      this.item = null
      var options = {
        page: 0,
        itemsPerPage: 10,
      }
      getItems(options).then(function (response) {
        vm.items= response.content
      }.bind(this))
    })
},
}

edited Nov 9, 2020 at 19:09

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

answered Nov 9, 2020 at 13:45

Excalibaard

2,10311 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naren · Accepted Answer · 2020-11-09 19:44:59Z

0

It's a scope(this) issue, Simply you can use arrow function in the response or also you can use async/await approach.

getItems(options).then(response => {
   this.items = response.content
})

async create (item) {
   try {
     const itemResponse = await createItem(item)
     this.scene = this.scenes.list
     this.item = null
     const options = { page: 0, itemsPerPage: 10 }
     const response = await getItems(options)
     this.items = response.content
   } catch() {
      console.log(err)
   }
}

edited Nov 9, 2020 at 19:44

answered Nov 9, 2020 at 19:38

Naren

4,5293 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Vue data-binding in axios response is not updating in view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related