Vue fetch response.json承诺不创建反应性的getter
Vue fetch response.json承诺不创建反应性的getter
提问于 2017-09-11 23:29:18
我有一个用类型记录编写的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()中没有包含“status”，就不会为this.results.status创建反应性getter，这意味着我无法对数据进行变异并在页面上做出反应。
我尝试在行this.results = data之后手动设置' status‘的值，当我使用VueTools检查对象时，我可以看到它具有状态属性和我分配给它的值。但是反应型的吸气器和制动器仍然不见踪影。
我还尝试将接口更改为具有构造函数的类，构造函数为“status”设置默认值，但这也无法为属性创建反应性getter和setter。
如何在不显式地向api响应中添加“status”(或任何其他任意属性)的情况下创建反应性getter和setter？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-12 03:47:51
Vue无法检测属性添加到已经添加到数据中的对象，除非通过$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");
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46165689
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号