Question

我想创建一个新物品。创建成功后，我需要更新项目列表。当我从服务器设置项目列表时，它无法在视图中更新。

<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))
    })
},
}

调试时，已成功设置“ this.items = response.content”。但是，鉴于数据未更新。该如何解决？

Answer 1

由于将this绑定到另一个上下文，this.items不再引用Vue实例，因此不会更新。

在createItem之前将Vue实例声明为另一个变量，您应该可以使用它：

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))
    })
},
}

Answer 2

这是一个范围（this）问题，您可以简单地在响应中使用箭头功能，也可以使用异步/等待方法。

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)
   }
}

视图中的Vue数据绑定未在视图中更新

2 个答案: