Javascript vue.js：根据API响应动态添加反应式复选框列表

我有一个vue.js组件，它由一个搜索字段组成，用于查询Google Places API（为了简单起见删除）。响应是带有位置的列表复选框。当用户检查一个位置时，我想在所选对象上设置一个标志

checked

为

true

但是，我也希望使此属性成为反应性的，但是在运行时添加反应性属性并不起作用（请参阅）

选择您的门店位置：
{{place.name}}

{{place.formatted_address}}
导出默认值{
数据（）{
返回{
地点：[]，
api:{
域名：'https://maps.googleapis.com/maps/api/js',
键：“API键”，
图书馆:"地方",，
},
};
},
安装的（）{
window.onload=this.loadScript(
`${this.api.domain}？key=${this.api.key}&libraries=${this.api.libraries}`，
这是自动完成
);
},
观察：{
},
方法：{
loadScript（src，回调）{
const script=document.createElement（'script'）；
document.body.appendChild（脚本）；
如果（回调）{
script.onload=回调；
}
script.src=src；
},
bindAutocomplete（）{
this.autocomplete=new google.maps.places.SearchBox(
这是。$refs.complete
);
this.autocomplete.addListener（'places\u changed'，this.pipeAddress）；
},
管道地址（）{
this.places=this.autocomplete.getPlaces（）；
},
},
};

这个组件可以工作，但我不能通过编程将任何复选框设置为“checked”，例如通过

This.places.forEach（（place）=>{place.checked=true；}

。实现这一点的正确方法是什么

谢谢

---

Henning

在观察数据之前，即在将数据添加到

数据之前，需要声明
已选中的
属性

pipeAddress() {
    this.places = this.autocomplete.getPlaces().map(
        place => { place.checked = false; return place }
    );
},

一种方法是将
places
返回的数组中的
places
对象转换为包含
checked
属性，然后在
数据中指定一个键

pipeAddress() {
    this.places = this.autocomplete.getPlaces().map(
        place => { place.checked = false; return place }
    );
},

现在，当观察到数据时，checked属性将出现，因此是被动的，因此DOM可以相应地更新


从Vue博客：

当您添加在观察数据时不存在的新属性时。由于ES5的限制，并且为了确保跨浏览器的行为一致，Vue.js无法检测属性的添加/删除。最佳做法是始终声明需要预先响应的属性。在绝对需要添加或删除的情况下在运行时删除属性，请使用全局Vue.set或Vue.delete方法

很漂亮，很有魅力。出于某种原因，我想我必须删除一些类似于
places[0]的内容。选中了
才能跟踪它，似乎在任务发生时属性就必须在那里。非常感谢！