Question

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

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

在我的Fetch方法中，我将response.json（）promise转换为SearchResult接口的数组，如下所示：

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

我遇到的问题是，如果'status'未包含在response.json（）中，则不会为this.results.status创建反应性getter，这意味着我无法改变数据并让它对页。

我尝试在行this.results = data之后手动设置'status'的值，当我使用VueTools检查对象时，我可以看到它具有status赋值的status属性。但是反应性吸气剂和固定剂仍然缺失。

我还尝试使用为'status'设置默认值的构造函数将接口更改为类，但这也无法为属性创建响应式getter和setter。

如何在不向api响应显式添加“status”（或任何其他任意属性）的情况下创建反应式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"); 
  })

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

1 个答案: