範圍內的組件衝突

Question

我試圖抽象Google Places自動完成輸入組件，以便多次使用它。

但是，當我實例化超過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在你的方法/生命週期掛鉤引用它。