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

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

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

我还尝试将接口更改为具有为“状态”设置默认值的构造函数的类，但这也未能为属性创建反应式 getter 和 setter。

如何在不向 api 响应显式添加“状态”（或任何其他任意属性）的情况下创建反应式 getter 和 setter？

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