范围内的组件冲突

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在你的方法/生命周期挂钩引用它。