Vue - 如何从异步方法更改数据中的值

Question

我正在使用 vuetify 为 Web 应用程序创建客户端，并且我有一些从 nodejs 服务器获取数据的异步方法。我遇到的问题是我无法将数据中的值更改为我正在获取的数据。我的数据如下所示：

  data() {
  return {
    //holds data coming from server
      loading: false,
      cards: [
        {title: 'Eos Lab', os: 'Linux', roomno: 'idk', comps: "0"},
        {title: 'Arch Lab', os: 'Linux', roomno: 'idk', comps: "0"},
        {title: 'Data Comm Lab', os: 'Linux', roomno: 'idk', comps: "0"}
      ],
  }
},

我的异步函数看起来像这样，我尝试创建一个变量 self = this 我读过的可能会修复它，但我得到的错误是“无法读取未定义的属性“0””

 methods: {
  async getEosComp() {
    var self = this
    this.loading = true
    collectDataService.getMakEosTotalComp()
    .then(data => {
      self.data[0].comps = data
      self.loading = false
    })
  },

Answer 1

您应该使用 this.cards 而不是 this.data 并使用 this.$set 更新给定索引处的数据：

    .then(data => {
      this.$set(this.cards,0,{...this.cards[0],comps: data})
      this.loading = false
    })

Vue - 如何从异步方法更改数据中的值

Vue - how to change value in data from async method

javascript

vue.js

vuetify.js