Конфликтующие компоненты в области

Question

Я пытаюсь абстрагировать компонент ввода автозаполнения Google Адресов, чтобы использовать его несколько раз.

Однако данные и методы перекрываются, когда я создаю более одного из следующих компонентов. (То же 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 в ваших методах/жизненный цикле крюков.