Vue.js this.$refs 由于 v-if 为空

Question

我有一个简单的 Vue 组件，它显示一个地址，但如果用户单击一个按钮，它会转换成一个表单来编辑地址。地址字段是使用 Google Maps API 自动完成的。因为该字段有一半时间是隐藏的(实际上不存在)，所以每次显示该字段时我都必须重新实例化自动完成。

<template>
  <div>

    <div v-if="editing">
      <div><input ref="autocomplete" v-model="address"></div>
      <button @click="save">Save</button>
    </div>

    <div v-else>
      <p>{{ address }}</p>
      <button @click="edit">Edit</button>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    editing: false,
    address: ""
  },
  methods: {
    edit() {
      this.editing = true;
      this.initAutocomplete();
    },
    save() {
      this.editing = false;
    }
    initAutocomplete() {
      this.autocomplete = new google.maps.places.Autocomplete(this.$refs.autocomplete, {});
    }
  },
  mounted() {
    this.initAutocomplete();
  }
}

我得到的错误是自动完成引用不是有效的 HTMLInputElement，当我执行 console.log(this.$refs) 时它只生成了 {} 即使输入字段清楚地显示在屏幕上。然后我意识到它试图引用一个不存在的字段，所以我试图将自动完成初始化限制为仅当输入字段应该通过 v-if 可见时。即使如此，initAutocomplete() 仍然在尝试引用不存在的字段时出错。

如何确保引用先存在？

Answer 1

也许解决方案是使用 $nextTick这将等待您的 DOM 重新呈现。

所以你的代码看起来像:

edit() {
  this.editing = true;
  this.$nextTick(() => { this.initAutocomplete(); });
},

此外，如果您尝试在 mounting 期间使用您的 this.initAutocomplete(); 它无法工作，因为 $refs.autocomplete 不是现有但我不确定你是否需要它，因为你的 v-model 已经是空的。