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

【问题标题】：Vue - how to change value in data from async methodVue - 如何从异步方法更改数据中的值
【发布时间】：2021-07-28 16:21:39
【问题描述】：

我正在使用 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
    })
  },

【问题讨论】：

data[0].comps 是什么？ data()返回的对象中没有data属性

标签： javascript vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：