Question

我正在尝试抽象Google商家信息自动填充输入组件，以便多次使用它。

但是，当我实例化以下组件中的1个以上时，数据和方法会重叠。（记录相同的place）

<template>
  <input :ref="inputRef" type="text">
</template>

<script>
var autocompleteInput

export default {
  props: ['inputRef'],
  methods: {
    fetchAddress() {
      var place = autocompleteInput.getPlace();
      console.log(place)
    }
  },
  mounted() {
    autocompleteInput = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */(this.$refs[this.inputRef]),
    {types: ['address']});
    autocompleteInput.addListener('place_changed', this.fetchAddress);
    console.log(this.$refs[this.inputRef])
  }
}
</script>

我的猜测是var autocompleteInput是问题所在，因为它似乎超出了范围。

然而，我无法弄清楚如何将其缩小范围。

我该如何解决这个问题？

Answer 1

你是对的。该组件只会被创建/定义一次，因此只有一个autocompleteInput。

使其成为data属性，以将其与每个呈现的实例隔离

data () {
  return {
    autocompleteInput: null
  }
}

并在您的方法/生命周期挂钩中通过this.autocompleteInput引用它。

范围内的组件冲突

1 个答案: