Vue fetch response.json 承诺不会创建响应式 getter

Question

我有一个用 Typescript 编写的 Vue 应用程序，我正在使用 Fetch 从 api 检索数据。在我的一个组件中，我定义了以下接口：

interface SearchResult {
    device_id: string;
    location: string;
    sub_location: string;
    status: string;
}

在我的 Fetch 方法中，我将 response.json() 承诺转换为 SearchResult 接口的数组，如下所示：

fetch(url).then(response => response.json() as Promise<SearchResult[]>)
          .then(data => { 
              this.results = data; 
          })

我遇到的问题是，如果 'status' 未包含在 response.json() 中，则不会为 this.results.status 创建响应式 getter，这意味着我不能' t 改变数据并让它在页面上做出反应。

我尝试在 this.results = data 行之后手动设置 'status' 的值，当我使用 VueTools 检查对象时，我可以看到它的状态为属性，值为我分配了它。但是反应式 getter 和 setter 仍然缺失。

我还尝试将接口更改为 class 并使用构造函数为 'status' 设置了默认值，但这也未能创建响应式 getter 和 setter 对于属性.

如何在不向 api 响应显式添加 'status'（或任何其他任意属性）的情况下创建反应式 getters 和 setters？

Answer 1

Vue cannot detect 添加到已添加到数据的对象的属性，除非您通过 $set.

添加属性

将您的提取响应更改为：

fetch(url)
  .then(response => response.json() as Promise<SearchResult[]>)
  .then(data => { 
    this.results = data; 
    for (let result of this.results)
      this.$set(result, 'status', "some value");
  })

虽然你也应该能够逃脱：

fetch(url)
  .then(response => response.json() as Promise<SearchResult[]>)
  .then(data => { 
    this.results = data.map(d => d.status = "some value"); 
  })

Vue fetch response.json 承诺不会创建响应式 getter

Vue fetch response.json promise not creating reactive getters

json

typescript

fetch-api

vuejs2