时间戳

首页 > 解决方案 > 由于 v-if，Vue.js this.$refs 为空

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

问题描述

我有一个简单的 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()在尝试引用不存在的字段时仍然会出错。

如何确保引用首先存在？

标签： vue.js

解决方案

也许一个解决方案是使用$nextTick来等待你的 DOM 重新渲染。

所以你的代码看起来像：

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

此外，如果您尝试使用您的this.initAutocomplete();，mounting因为它$refs.autocomplete还不存在，但我不确定您是否需要它，因为您的 v-model 已经为空。

推荐阅读