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

Question

我有一个 vue.js 组件，它包含一个查询 Google Places API 的搜索字段（为简单起见已删除）。响应是带有地点的列表复选框。当用户检查一个地方时，我想在被选中的对象上设置一个标志 checked 到 true。

不过，我也想让这个属性成为响应式，但在运行时添加响应式属性不起作用（请参阅https://vuejs.org/guide/reactivity.html）。

<template>
  <form>
    <input type="text" ref="complete" v-bind:placeholder="placeholder">
    <fieldset v-if="places" class="checklist">
      <h4>Select your store locations:</h4>
      <div v-for="place in places">
        <input :id="place.id" type="checkbox" v-model="place.checked">
        <label :for="place.id">
          {{ place.name }}<br>
          <span class="subtext">{{ place.formatted_address }}</span>
        </label>
      </div>
    </fieldset>
  </form>
</template>
<script>
  export default {
    data() {
      return {
        places: [],
        api: {
          domain: 'https://maps.googleapis.com/maps/api/js',
          key: 'API Key',
          libraries: 'places',
        },
      };
    },
    mounted() {
      window.onload = this.loadScript(
        `${this.api.domain}?key=${this.api.key}&libraries=${this.api.libraries}`,
        this.bindAutocomplete
      );
    },
    watch: {
    },
    methods: {
      loadScript(src, callback) {
        const script = document.createElement('script');
        document.body.appendChild(script);
        if (callback) {
          script.onload = callback;
        }
        script.src = src;
      },
      bindAutocomplete() {
        this.autocomplete = new google.maps.places.SearchBox(
          this.$refs.complete
        );
        this.autocomplete.addListener('places_changed', this.pipeAddress);
      },
      pipeAddress() {
        this.places = this.autocomplete.getPlaces();
      },
    },
  };
</script>

此组件有效，但我无法以编程方式将任何复选框设置为“已选中”，例如通过this.places.forEach((place) => { place.checked = true; }。实现这一目标的正确方法是什么？

谢谢，

亨宁

Answer 1

您需要在观察数据之前声明checked 属性，即在将其添加到data 之前。

一种方法是在分配给data 中的键之前，将getPlaces() 返回的数组中的places 对象转换为包含checked 属性。

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

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

Here's a fiddle

Explanation 来自 Vue 博客：

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